{% load static %}
{% load humanize %}

<!-- Obsolete port warning start-->
{% if port.replaced_by %}
    <div class="alert alert-warning" role="alert">
        This port is obsolete. It has been replaced by <a
            href="{% url 'port_detail' port.replaced_by %}">{{ port.replaced_by }}</a>.
    </div>
{% endif %}
<!-- Obsolete port warning end-->

<!-- Deleted port warning start-->
{% if port.active is False %}
    <div class="alert alert-danger" role="alert">
        This port has been deleted. This page will exist till another port with the name "{{ port.name }}" comes
        into existence.
    </div>
{% endif %}
<!-- Deleted port warning end-->
<h2 class="mb-1">
    <span id="port_name" class="font-weight-bold display-4"><a class="text-dark" style="text-decoration: none;" href="{% url 'port_detail' port.name %}">{{ port.name }}</a></span>
    <span class="text-secondary" style="font-size: 14px">({{ port.portdir }})</span>
    {% if port.version_updated_at %}
    <span class="text-secondary" style="font-size: 14px"><ins>Updated: {{ port.version_updated_at|naturaltime }}</ins></span>
    {% endif %}
    <span class="float-right">
        {% if is_followed %}<a href="{% url 'unfollow_port' port.name %}" class="btn btn-sm btn-light"><i class="fa fa-minus-circle"></i> Unfollow</a>
        {% else %}<a href="{% url 'follow_port' port.name %}" class="btn btn-sm btn-light"><i class="fa fa-plus"></i> Add to my watchlist</a>{% endif %}
        <button class="btn btn-sm btn-light" disabled>{{ port.subscribers.count|intcomma }}</button>
    </span>
</h2>
<span class="lead mb-0 mt-0">{{ port.description }}</span>
{% include 'port/includes/full-description-collapsible.html' with ld=port.long_description d=port.description %}
<span class="f15 mr-md-4 mr-3"><strong>Version: </strong>{{ port.version }}
    {% if port.livecheck.has_updates %}
        <button type="button" class="btn p-0" data-toggle="tooltip" data-placement="top"
                title="{{ port.livecheck.result }}">
            <i class="text-warning fas fa-exclamation-circle"></i>
        </button>
    {% endif %}
    {% if port.livecheck.error %}
        <button type="button" class="btn p-0" data-toggle="tooltip" data-placement="top"
                title="{{ port.livecheck.error }}">
            <i class="text-secondary fas fa-exclamation-circle"></i>
        </button>
    {% endif %}
</span>
<span class="f15 mr-md-4 mr-3"><strong>License: </strong>{{ port.license }}</span>
{% if port.active %}<span class="f15 mr-md-4 mr-3"><a style="text-decoration: none;" class="text-dark" href="https://github.com/macports/macports-ports/blob/master/{{ port.portdir }}/Portfile"><img class="mr-1" height="20px" src="{% static 'images/github.png' %}"><strong>GitHub</strong></a></span>{% endif %}

<div class="modal fade" id="tickets-modal" tabindex="-1" role="dialog" aria-labelledby="tickets-box-label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="tickets-box-label">Trac Tickets</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="tickets-box">
          Please wait while tickets are being fetched from Trac.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>