{%- assign sorted_contacts = site.contacts | sort: "display_order" -%}
<section>
  <div class="container">
    <div class="row">
      <div class="col mt-1 home__col--heading-underline home__col--heading-underline-tan">
        <h3 id="contact" class="typography__section--heading margins__heading--btm links__offset">Contacts</h3>
      </div>
    </div>
  </div>
  <div class="container contacts__padding-top background__color--tan">
    <div class="row editor-link">
      <div class="col editor-link mb-3">
        <a href="cloudcannon:collections/_contacts/" class="btn btn-success editor-button">Edit Contacts</a>
      </div>
    </div>
    <div class="row">
      {%- for contact in sorted_contacts -%}
      {%- assign contact_name = contact.name | split: " " -%}
      {%- assign first = contact_name[0] -%}
      {%- assign last = contact_name[1] -%}
      {% if contact.portrait_image != "For departments with no contact photos, do not change this field." %}
      <div class="col-md-6 contacts__col-bottom-margin">
        <div class="row">
          <div class="col-4 contacts__col--img">
            {% if contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" alt="Photo of {{ contact.name }}" class="img-fluid contacts__portrait" />{% endif %}
          </div>
          <div class="col-8 float-right">
            <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
            {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
            <p class="notranslate">
              {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
              {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
              {%- if contact.fax -%}Fax: {{ contact.fax }}{% endif %}
              {%- if contact.bio == true -%}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %}
            </p>
          </div>
        </div>
      </div>
      {% else %}
      <div class="col-sm-6 col-md-4 mb-3">
        <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
        {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
        <p class="notranslate">
          {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
          {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
          {% if contact.fax %}Fax: {{ contact.fax }}{% endif %}
          {% if contact.bio == true %}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %}
        </p>
      </div>
      {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
</section>
{% for contact in sorted_contacts %}
{%- if contact.bio == true -%}
<!-- Modal -->
<div class="modal fade" id="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}" tabindex="-1" aria-labelledby="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="typography__h6" id="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}-label">{{ contact.name }} Bio</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% if contact.portrait_image != 'For departments with no contact photos, do not change this field.' and contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" class="img-fluid float-left mr-2 mb-2" alt="Photo of {{ contact.name }} KCC's {{ contact.contacts_title }}">{% endif %}
        <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
        {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
        {{ contact.content }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{%- endif -%}
{% endfor %}