{% set location_name = location.abbrName|default(location.displayName|default(location.name)) %}
{% set major_name = major.displayName|default(major.name) %}

{% if schools %}
    <section id="list-schools" class="mt-3" data-uri="{{ path("app_program_list", {"slug": major.slug}) }}">
        <div class="card shadow-sm">
            <h3 class="card-header bg-white text-primary text-center text-md-start fw-light">List of all {{ major_name }} colleges in {{ location_name }}</h3>
            <table class="school-table table small">
                <thead class="bg-primary text-white">
                    <tr>
                        <th colspan="2">School</th>
                        <th>Average Tuition</th>
                        <th>Student Teacher Ratio</th>
                        <th>Enrolled Students</th>
                    </tr>
                </thead>
                <tbody>
                    {% for school in schools.results %}
                        <tr>
                            <td class="logo-col align-middle">
                                <a href="{{ path('app_school', {'slug': school.slug}) }}">
                                    <picture>
                                    {% if school.logo_path %}
                                        <source type="image/webp" srcset="{{ school.logo_path | imagine_filter('school_webp_logo_sm') }}">
                                        <img class="img-thumbnail d-block mx-auto mb-2" alt="{{ school.name }} Logo" src="{{ school.logo_path | imagine_filter('school_logo_sm') }}">
                                    {% else %}
                                        <source type="image/webp" srcset="{{ asset("build/images/default-logo.png") | imagine_filter('school_webp_logo_sm') }}">
                                        <img class="img-thumbnail d-block mx-auto mb-2" alt="{{ school.name }} Logo" src="{{ asset("build/images/default-logo.png") | imagine_filter('school_logo_sm') }}">
                                    {% endif %}
                                    </picture>
                                </a>
                            </td>
                            <td class="name-col align-middle">
                                <a class="d-block text-primary" href="{{ path('app_school', {'slug': school.slug}) }}">{{ school.name }}</a>
                                <span class="small text-muted"><i class="fas fa-map-marker-alt me-1"></i> {{ school.city }}, {{ school.state }}</span>
                            </td>
                            <td class="tuition-col align-middle text-center">
                                {% if school.avg_tuition %}
                                <div class="tuition-rating text-nowrap text-info">
                                    <i class="{% if school.tuition_rating < 1 %}fal{% else %}fas{% endif %} fa-usd-square"></i>
                                    <i class="{% if school.tuition_rating < 2 %}fal{% else %}fas{% endif %} fa-usd-square"></i>
                                    <i class="{% if school.tuition_rating < 3 %}fal{% else %}fas{% endif %} fa-usd-square"></i>
                                    <i class="{% if school.tuition_rating < 4 %}fal{% else %}fas{% endif %} fa-usd-square"></i>
                                    <i class="{% if school.tuition_rating < 5 %}fal{% else %}fas{% endif %} fa-usd-square"></i>
                                </div>
                                <span class="rating-text" itemprop="ratingValue">{{ school.tuition_rating }}/5</span>
                                {% else %}
                                &nbsp;
                                {% endif %}
                            </td>
                            <td class="ratio-col align-middle text-center">
                                {% if school.staff and school.enrolled %}
                                {{ (school.enrolled / school.staff)|number_format(0) }} : 1
                                {% else %}
                                &nbsp;
                                {% endif %}
                            </td>
                            <td class="enrolled-col align-middle text-center">{% if school.enrolled %}{{ school.enrolled|number_format }}{% else %}&nbsp;{% endif %}</td>
                        </tr>
                    {% endfor %}
                    </thead>
            </table>
            <nav aria-label="School list nav">
                <ul class="pagination justify-content-center justify-content-md-end mx-3">
                    <li class="page-item {% if schools.page == 1 %}disabled{% endif %}">
                        <a class="page-link" href="#" tabindex="-1" {% if schools.page > 1 %}data-page="1"{% endif %}>
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">First</span>
                        </a>
                    </li>
                    <li class="page-item {% if schools.page == 1 %}disabled{% endif %}">
                        <a class="page-link" href="#" tabindex="-1" {% if schools.page > 1 %}data-page="{{ schools.page - 1}}"{% endif %}>
                            <span aria-hidden="true">&lsaquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    {% for i in schools.page-2..schools.page+2 %}
                        {% if i > 0 and i <= schools.pages %}
                            <li class="page-item {% if i == schools.page %}active disabled{% endif %}"><a class="page-link" href="#" data-page="{{ i }}">{{ i }}</a></li>
                        {% endif %}
                    {% endfor %}
                    <li class="page-item {% if schools.page >= schools.pages %}disabled{% endif %}">
                        <a class="page-link" href="#" {% if schools.page < schools.pages %}data-page="{{ schools.page + 1}}"{% endif %}>
                            <span aria-hidden="true">&rsaquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>

                    <li class="page-item {% if schools.pages <= 1 or schools.page >= schools.pages %}disabled{% endif %}">
                        <a class="page-link" href="#" {% if schools.pages > 1 and schools.page < schools.pages %}data-page="{{ schools.pages }}"{% endif %}>
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Last</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>
{% endif %}