{% extends 'layout.html' %}
{% load static %}
{% load format_names %}
{% load humanize %}

{% block title %}{{ port.name }} |{% endblock %}

{% block head_scripts %}
    <script type="text/javascript" src="{% static 'js/port-detail.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="main-content" class="mt-2">
        {% include 'port/includes/port-header.html' with port=port %}
        {% include 'port/includes/port-tabs.html' with port_name=port.name active="summary" %}

    <div class="row mt-4">
        <div class="col-lg-8">
        <table class="table table-striped mt-2">
            <tr>
                <td><strong>Maintainers</strong></td>
                <td>
                    {% if port.closedmaintainer is True %}
                        <button type="button" class="btn" data-toggle="tooltip" data-placement="top"
                                title="Changes of this port require maintainer's approval.">
                            <i class="fas text-secondary fa-lock"></i>
                        </button>
                    {% endif %}
                    {% if port.maintainers.all.count > 0 %}
                        {% for maintainer in port.maintainers.all %}
                            {% if maintainer.github %}
                                <a class="mr-1" href="{% url 'maintainer' maintainer.github %}">{{ maintainer.github }}</a>
                            {% else %}
                                <span class="mr-1">{{ maintainer.name }} (GitHub handle not provided)</span>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        No Maintainer
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td><strong>Categories</strong></td>
                <td>
                {% if port.categories.all.count > 0 %}
                    {% for category in port.categories.all %}
                        <a class="mr-1" href="{% url 'category' category.name %}">{{ category.name }}</a>
                    {% endfor %}
                {% else %}
                    --
                {% endif %}
                </td>
            </tr>
            <tr>
                <td><strong>Homepage</strong></td>
                <td>
                    <a href="{{ port.homepage }}">{{ port.homepage }}</a>
                </td>
            </tr>
            <tr>
                <td><strong>Platforms</strong></td>
                <td>
                    {{ port.platforms }}
                </td>
            </tr>
            <tr>
                <td><strong>Variants</strong></td>
                <td>
                    {% if port.variants.all.count > 0 %}
                        {% for variant in port.variants.all.values|dictsort:"variant" %}
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="{% url 'variant' variant.variant %}">{{ variant.variant }}</a>
                                    {% if variant.description %}({{ variant.description }}){% endif %}
                                </li>
                            </ul>
                        {% endfor %}
                    {% else %}
                        -
                    {% endif %}
                </td>
            </tr>
        </table>
            <br>
        {% with subports=port.get_subports %}
        {% if subports %}
        <h4 class="border-bottom">Subport(s) ({{ subports.count|intcomma }})</h4>
        <div class="row">
            {% for subport in subports %}
            <div class="col-3">
                <a class="f15" href="{% url 'port_detail' subport.name %}">{{ subport.name }}</a><br>
            </div>
            {% endfor %}
        </div>
        <br>
        {% endif %}
        {% endwith %}
            <h4 class="border-bottom">"{{ port.name }}" depends on</h4>
            {% if port.dependent_port.all.count > 0 %}
                    {% for d in port.dependent_port.all %}
                        <h6><ins>{{ d.type }} ({{ d.dependencies.all.count|intcomma }})</ins></h6>
                        <div class="row mb-4">
                        {% for i in d.dependencies.all.values|dictsort:"name" %}
                            <div class="col-3">
                                <a class="f15" href="{% url 'port_detail' i.name %}">{{ i.name }}</a><br>
                            </div>
                        {% endfor %}
                        </div>
                    {% endfor %}
            {% else %}
                <p>No ports</p>
            {% endif %}
            <br>
            <h4 class="border-bottom">Ports that depend on "{{ port.name }}"</h4>
            {% if dependents|length > 0 %}
                {% for d in dependents %}
                    <a class="btn pl-0" data-toggle="collapse" href="#d2-{{ d.type }}" role="button" aria-expanded="false" aria-controls="d2-{{ d.type }}">
                        <ins>{{ d.type }} ({{ d.ports|length|intcomma }})</ins> <i class="fa fa-chevron-circle-down"></i>
                    </a><br>
                    <div class="row mb-4 collapse" id="d2-{{ d.type }}">
                        {% for i in d.ports %}
                            <div class="col-3">
                                <a class="f15" href="{% url 'port_detail' i %}">{{ i }}</a><br>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            {% else %}
                <p>No ports</p>
            {% endif %}
            <br>
            {% if port.notes %}
                <h4 class="border-bottom">Port notes</h4>
                {{ port.notes|linebreaks }}
                <br>
            {% endif %}
        </div>
        <div class="col-lg-4">
            <div>
                <h5>Port Health:</h5>
                <div id="port-health-table-wrapper" style="min-height: 400px;">
                    <p class="lead text-center mt-5"><img width="35px" style="margin-right: 25px;" src="/static/images/tspinner.gif">Loading Port Health</p>
                </div>
            </div>
            <div class="card bg-light p-0 mt-2">
                <div class="card-body bg-light p-2">
                    <h6 class="text-uppercase">Installations (30 days)</h6>
                    <h1 class="display-5 mb-0">{{count.all|intcomma}}</h1>
                </div>
            </div>
            <div class="card bg-light p-0 mt-2">
                <div class="card-body bg-light p-2">
                    <h6 class="text-uppercase">Requested Installations (30 days)</h6>
                    <h1 class="display-5 mb-0">{{ count.requested|intcomma }}</h1>
                </div>
            </div>
            {% if port.livecheck.result %}
            <div class="rounded border p-2 mt-2">
                <h5>Livecheck results</h5>
                <p class="text-secondary f14">{{ port.livecheck.result }}</p>
                <p class="f12">livecheck ran: <strong>{{ port.livecheck.updated_at|naturaltime }}</strong></p>
            </div>
            {% elif port.livecheck.error %}
                <div class="rounded border mt-2 p-2">
                    <h5>Livecheck error</h5>
                    <p class="text-secondary" class="f14">{{ port.livecheck.error }}</p>
                    <p class="f12">last updated: <strong>{{ port.livecheck.updated_at|naturaltime }}</strong></p>
                </div>
            {% endif %}
        </div>
    </div>
    </div>
{% endblock %}