{% load i18n %}
<div class="card">
  <h5 class="card-header d-flex justify-content-between align-items-center">
    {% trans "Applications" %}
    {% if add_url %}
      <a href="{{ add_url }}" class="btn btn-sm btn-primary">
        <i class="mdi mdi-plus-thick"></i> {% trans "Assign" %}
      </a>
    {% endif %}
  </h5>
  <div class="card-body">
    {% if deployments %}
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>{% trans "Application" %}</th>
          <th>{% trans "Role" %}</th>
          <th>{% trans "Port" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for dep in deployments %}
        <tr>
          <td><a href="{{ dep.application.get_absolute_url }}">{{ dep.application }}</a></td>
          <td>{{ dep.get_role_display }}</td>
          <td>{{ dep.port|default:"-" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if total_count > 5 %}
    <div class="text-center mt-2">
      <a href="applications/" class="text-muted small">{% trans "View all" %} ({{ total_count }})</a>
    </div>
    {% endif %}
    {% else %}
    <div class="text-center text-muted py-2">
      <p class="mb-1">{% trans "No applications assigned" %}</p>
      {% if add_url %}
        <a href="{{ add_url }}" class="btn btn-sm btn-outline-primary">
          <i class="mdi mdi-plus-thick"></i> {% trans "Assign Application" %}
        </a>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>