{% load humanize %}

<button class="float-right" type="button" style="color: red;" onclick="cancel_search()">Cancel Search</button>
{% if ports.count > 0 %}
    {% if content == "Category" %}
        <h4>Your search "{{ query }}" in category "{{ search_in }}" matched {{ ports|length|intcomma }} ports.</h4>
    {% elif content == "Maintainer" %}
        <h4>Your search "{{ query }}" in ports maintained by "{{ search_in }}" matched {{ ports|length|intcomma }} ports.</h4>
    {% elif content == "Variant" %}
        <h4>Your search "{{ query }}" in variant "{{ search_in }}" matched {{ ports|length|intcomma }} ports.</h4>
    {% else %}
        <h4>Showing results for "{{ query }}".</h4>
    {% endif %}



    {% if content == "Variant" %}
        <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Version</th>
            <th scope="col">Description</th>
        </tr>
        </thead>
        {% for port in ports %}
            <tr>
                <td><a href="{% url 'port_detail' port.port.name %}">{{ port.port.name }}</a></td>
                <td>{{ port.port.version }}</td>
                <td>{{ port.port.description }}</td>
            </tr>
        {% endfor %}
    </table>
        {% else %}

    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Version</th>
            <th scope="col">Description</th>
        </tr>
        </thead>
        {% for port in ports %}
            <tr>
                <td><a href="{% url 'port_detail' port.name %}">{{ port.name }}</a></td>
                <td>{{ port.version }}</td>
                <td>{{ port.description }}</td>
            </tr>
        {% endfor %}
    </table>
        {% endif %}
{% else %}
    <br><br>
    {% if content == "Category" %}
        <div class="alert alert-danger" role="alert">
            Sorry, no matching ports found for "{{ query }}" in category "{{ search_in }}".
        </div>
    {% elif content == "Maintainer" %}
        <div class="alert alert-danger" role="alert">
            Sorry, no matching ports found for "{{ query }}" in the ports maintained by "{{ search_in }}".
        </div>
    {% elif content == "Variant" %}
        <div class="alert alert-danger" role="alert">
            Sorry, no matching ports found for "{{ query }}" in the variant "{{ search_in }}".
        </div>
    {% else %}
        <div class="alert alert-danger" role="alert">
            Sorry, no matching ports found for "{{ query }}"
        </div>
    {% endif %}
{% endif %}