{% extends "layout.html" %}

{% block content %}
<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          Applications
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary d-none d-sm-inline-block">
            <span class="ti ti-plus me-2"></span>
            New Application
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">All Applications</h3>
        </div>
        <div class="table-responsive">
          <table class="table table-vcenter card-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Server</th>
                <th>Ports</th>
                <th>Created</th>
                <th class="w-1"></th>
              </tr>
            </thead>
            <tbody>
              {% for app in apps %}
              <tr>
                <td>
                  <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}">{{ app.name }}</a>
                </td>
                <td>
                  <a href="{{ url_for('dashboard.server_view', server_id=app.server.id) }}">
                    {{ app.server.hostname }}
                  </a>
                </td>
                <td>
                  {% if app.ports %}
                  {% for port in app.ports %}
                  <span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
                  {% endfor %}
                  {% else %}
                  <span class="text-muted">No ports defined</span>
                  {% endif %}
                </td>
                <td class="text-muted">{{ app.created_at.strftime('%Y-%m-%d') }}</td>
                <td>
                  <div class="btn-list flex-nowrap">
                    <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-sm btn-outline-primary">
                      Edit
                    </a>
                  </div>
                </td>
              </tr>
              {% else %}
              <tr>
                <td colspan="5" class="text-center py-4">
                  <div class="empty">
                    <div class="empty-img">
                      <span class="ti ti-apps" style="font-size: 3rem;"></span>
                    </div>
                    <p class="empty-title">No applications found</p>
                    <p class="empty-subtitle text-muted">
                      Start by creating a new application.
                    </p>
                    <div class="empty-action">
                      <a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary">
                        <span class="ti ti-plus me-2"></span>
                        New Application
                      </a>
                    </div>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}