{%- assign sorted_contacts = site.contacts | sort: "display_order" -%}
      <section>
        <div class="container">
          <div class="row">
            <div class="col mt-1 home__col--heading-underline">
              <h3 id="contact" class="typography__section--heading margins__heading--btm links__offset">Contacts</h3>
            </div>
          </div>
          <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." and contact.portrait_image != 'none' %}
            <div class="col-md-6 contacts__col-bottom-margin">
              <div class="row">
                <div class="col-4 contacts__col--img">
                  <img src="{{ page.baseurl }}assets/img/blank-contact.svg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" alt="Photo of {{ contact.name }}" class="img-fluid contacts__portrait" />
                </div>
                <div class="col-8">
                  <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>
            {% elsif contact.portrait_image == 'none' %}
            <div class="col-md-6 contacts__col-bottom-margin">
              <div class="row">
                <div class="col-4 contacts__col--img">
                  <!-- No contact portrait -->
                </div>
                <div class="col-8">
                  <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 %}<img src="{{ page.baseurl }}assets/img/blank-contact.svg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" class="img-fluid me-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 %}