{% load custom_template_filters %}

{% if professionals|length > 0 %}
  {% for professional in professionals %}
    <div class="card card-bordered mb-5" aria-label="Professional: {{professional.user.get_full_name}}" tabindex="0">
      <div class="row">
          <div class="card-body">
            <div class="row">
              <div class="col">
                <span class="avatar avatar-xl avatar-circle">
                  <img class="avatar-img" src="{% if professional.user.photo %} {{ professional.user.photo.url }} {% endif %}" alt="{{professional.user.get_full_name}}">
                </span>
              </div>
              <div class="col">
                <span class="float-end"><i class="bi-envelope me-1"></i> {{professional.user.email}} </span><br>
                <span class="float-end"><i class="bi-phone me-1"></i> {{professional.user.phone.as_national}} </span>
                {% if request.user.is_staff %}
                <br>
                <span class="float-end">
                  <a class="btn btn-sm btn-soft-primary mt-3" href="{{ professional.user|admin_change_url }}">View Details</a>
                </span>
                {% endif %}
              </div>
            </div>
            <div class="row mt-2">
              <span><strong>{{professional.user.get_full_name}}</strong></span>
              <div class="text-muted small">
                <i class="bi-geo-alt me-1"></i> {{professional.user.address}}
              </div>
            </div>
            <div class="row mt-2">
              <p class="card-text text-dark" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;">{{professional.user.bio|safe}}</p>
            </div>
            <div class="row mt-5">
              <div class="col-sm-12 col-lg-4 mb-3 mb-md-0"><span><i class="bi-briefcase me-1"></i> <strong>Experience</strong> <br> {% for bar in professional.user.bar_admissions.all %} {{bar.state|beautify_bar_location_code}} since {{bar.admission_date|date:'Y'}} <br> {% endfor %}</span></div>
              <div class="col-sm-12 col-lg-4 mb-3 mb-md-0"><span><i class="bi-translate me-1"></i> <strong>Languages</strong> <br> English <br> {% for lang in professional.user.get_languages_display %} {{lang}} <br> {% endfor %}</span></div>
              <div class="col-sm-12 col-lg-4"><span><i class="bi-building me-1"></i> <strong>Firm</strong> <br>{{professional.user.firm_name}}</span></div>
            </div>
          </div>
      </div>
    </div>
    <br/>
  {% endfor %}
{% else %}
  <div class="card">
    <div class="card-body">
      <h3 class="card-text">No {{professional_type|lower}}s available</h3>
      <p class="card-text">There are no active {{professional_type|lower}} profiles as of now. Check again.</p>
    </div>
  </div>
{% endif %}