{% extends 'base/layout.html' %}
{% load i18n %}

{% block title %}{% trans "Application view" %}{% endblock %}

{% block content %}
<style>
  .itl-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
  .itl-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: .8rem; }
  .itl-group { border: 1px solid var(--tblr-border-color); border-left: 4px solid #64748b; border-radius: .5rem; background: var(--tblr-bg-surface); transition: box-shadow .12s ease; }
  .itl-group:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
  .itl-group.is-critical { border-left-color: #dc2626; }
  .itl-group-header { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; border-bottom: 1px solid var(--tblr-border-color); }
  .itl-group-header h3 { margin: 0; font-size: .95rem; }
  .itl-group-header h3 a { color: var(--tblr-body-color); text-decoration: none; }
  .itl-group-header h3 a:hover { color: var(--tblr-primary); }
  .itl-group-body { padding: .6rem .8rem; }
  .itl-server-table { font-size: .78rem; margin: 0; }
  .itl-server-table th { font-weight: 600; color: var(--tblr-secondary, var(--tblr-muted)); }
  .itl-sites { font-size: .72rem; color: var(--tblr-secondary, var(--tblr-muted)); }
</style>

<div class="itl-toolbar">
  <div class="me-auto">
    <h1 class="mb-0">{% trans "Application view" %}</h1>
    <div class="text-muted">{% trans "Referential applications with their servers and facilities" %}</div>
  </div>
  <form method="get" class="d-flex flex-wrap gap-2 align-items-end">
    <div>
      <label class="form-label mb-1">{% trans "Establishment" %}</label>
      <select name="site_id" class="form-select form-select-sm">
        <option value="">{% trans "All" %}</option>
        {% for site in sites_choices %}
          <option value="{{ site.pk }}" {% if filter_site_id == site.pk|stringformat:'s' %}selected{% endif %}>{{ site.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="form-label mb-1">{% trans "Criticality" %}</label>
      <select name="criticality" class="form-select form-select-sm">
        <option value="">{% trans "All" %}</option>
        {% for choice in criticality_choices %}
          <option value="{{ choice.0 }}" {% if filter_criticality == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="form-label mb-1">{% trans "Search" %}</label>
      <input type="text" name="q" value="{{ filter_q }}" class="form-control form-control-sm" placeholder="{% trans 'Application, server, IP…' %}">
    </div>
    <button type="submit" class="btn btn-sm btn-primary">{% trans "Filter" %}</button>
  </form>
</div>

{% if not groups %}
  <div class="alert alert-info">{% trans "No application matches these criteria." %}</div>
{% endif %}

<div class="itl-group-grid">
  {% for group in groups %}
    <section class="itl-group {% if group.has_critical %}is-critical{% endif %}">
      <div class="itl-group-header">
        <h3>
          <a href="{{ group.app.get_absolute_url }}">{{ group.name }}</a>
        </h3>
        <div class="d-flex gap-2">
          {% if group.is_multi_site %}<span class="badge text-bg-purple">{% trans "Multi-site" %}</span>{% endif %}
          {% if group.has_critical %}<span class="badge text-bg-red">{% trans "Critical" %}</span>{% endif %}
          <span class="badge text-bg-blue">{{ group.servers|length }} {% trans "servers" %}</span>
        </div>
      </div>
      <div class="itl-group-body">
        <div class="itl-sites mb-2">
          {{ group.sites|join:' · '|default:_('No business attachment') }}
        </div>
        {% if group.servers %}
          <table class="table table-sm itl-server-table">
            <thead>
              <tr><th>{% trans "Server" %}</th><th>{% trans "Type" %}</th><th>{% trans "IP" %}</th><th>{% trans "Role" %}</th></tr>
            </thead>
            <tbody>
              {% for server in group.servers %}
                <tr>
                  <td><a href="{{ server.obj.get_absolute_url }}">{{ server.obj.name }}</a></td>
                  <td>{{ server.kind }}</td>
                  <td>{{ server.ip|default:'—' }}</td>
                  <td>{{ server.role|default:'—' }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% else %}
          <div class="text-muted" style="font-size: .78rem;">{% trans "No attached server" %}</div>
        {% endif %}
      </div>
    </section>
  {% endfor %}
</div>
{% endblock %}