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

{% block title %}Ports |{% endblock %}

{% block content %}
        <h4 class="text-left p-0 mb-0 text-secondary mt-5">Available Ports for <ins>The MacPorts Project</ins></h4>
        <h1 class="display-4 font-weight-bold text-left">
            Install and upgrade open source software on macOS.
        </h1>
        <form class="mt-4" method="get" action="/search">
            <div class="form-row">
                <div class="col-md-8 col-12" id="bloodhound">
                    <input type="text" class="quick-input-search form-control rounded-pill typeahead" id="q" name="q"
                           placeholder="Start typing..." autofocus>
                    <img class="quick-input-search-spinner" id="search-spinner" src="{% static 'images/tspinner.gif' %}">
                    <button type="submit" class="quick-input-search-icon btn" id="search_submit"><i
                            class="fa fa-search"></i></button>
                    <input type="hidden" value="on" name="name">
                    <div class="my-4 text-center text-md-left">
                    <a class="btn btn-outline-secondary font-weight-bold rounded-pill mt-1" href="{% url 'search' %}">All
                        Ports</a>
                    <a class="btn btn-outline-secondary font-weight-bold rounded-pill mt-1"
                       href="https://www.macports.org/install.php">Install MacPorts</a>
                    </div>
                </div>
            </div>
        </form>
        <div class="row">
            <div class="col-md-4 mt-md-0 mt-3">
                <div class="card">
                    <div class="card-header bg-light">
                        <h6 class="text-uppercase mb-0">Popular ports</h6>
                    </div>
                    <div class="card-body px-3 py-1">
                        {% for top_port in top_ports %}
                            <a class="btn btn-link btn-lg text-dark p-0"
                               href="{% url 'port_detail' top_port.port %}">{{ top_port.port }}</a></span><br>
                        {% endfor %}
                    </div>
                    <a href="{% url 'stats_port_installations' %}" class="btn btn-light">More...</a>
                </div>
            </div>
            <div class="col-md-4 mt-md-0 mt-3">
                <div class="card">
                    <div class="card-header bg-light">
                        <h6 class="text-uppercase mb-0">Recently Added</h6>
                    </div>
                    <div class="card-body px-3 py-1">
                        {% for port in recently_added %}
                            <a class="btn btn-link btn-lg text-dark p-0"
                               href="{% url 'port_detail' port.name %}">{{ port.name }} <span class="f14 text-muted">({{ port.created_at|naturaltime }})</span></a></span><br>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-md-4 mt-md-0 mt-3">
                <div class="card p-0">
                    <div class="card-header bg-light">
                        <h6 class="text-uppercase mb-0">Active Ports</h6>
                    </div>
                    <div class="card-body px-3 py-1">
                        <h1 class="display-6 mb-0">{{ ports_count|intcomma }}</h1>
                    </div>
                    <a href="{% url 'search' %}" class="btn btn-light">View all</a>
                </div>
            </div>
        </div>


{% endblock %}