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

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

{% block content %}
<style>
  .itl-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1.25rem; }

  .itl-etab { margin-bottom: 1.5rem; }
  .itl-etab-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
  .itl-etab-header h2 a { color: var(--tblr-body-color); text-decoration: none; }
  .itl-etab-header h2 a:hover { color: var(--tblr-primary); }
  .itl-etab-stats { display: flex; gap: .4rem; }

  .itl-domain {
    border-radius: .6rem;
    padding: .8rem 1rem;
    margin-bottom: .8rem;
    background: color-mix(in srgb, var(--domain-color) 16%, var(--tblr-bg-surface));
    border: 1px solid color-mix(in srgb, var(--domain-color) 35%, var(--tblr-border-color));
    border-left: 5px solid color-mix(in srgb, var(--domain-color) 55%, var(--tblr-primary, #1b75bc));
  }
  .itl-domain > summary {
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; list-style: none; user-select: none;
  }
  .itl-domain > summary::-webkit-details-marker { display: none; }
  .itl-domain > summary::after {
    content: '▾'; font-size: .9rem; opacity: .5; transition: transform .15s ease;
  }
  .itl-domain:not([open]) > summary::after { transform: rotate(-90deg); }
  .itl-domain-title strong { font-size: 1.02rem; color: var(--tblr-body-color); }
  .itl-domain-title strong a { color: inherit; text-decoration: none; }
  .itl-domain-title strong a:hover { color: var(--tblr-primary); }
  .itl-domain-title em { display: block; font-style: normal; color: var(--tblr-secondary, var(--tblr-muted)); font-size: .8rem; margin-top: .1rem; }

  .itl-process {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: .5rem;
    padding: .65rem .85rem;
    margin-top: .65rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  .itl-process > summary {
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; list-style: none; user-select: none;
  }
  .itl-process > summary::-webkit-details-marker { display: none; }
  .itl-process > summary::after {
    content: '▾'; font-size: .85rem; opacity: .4; transition: transform .15s ease;
  }
  .itl-process:not([open]) > summary::after { transform: rotate(-90deg); }
  .itl-process-title strong { color: var(--tblr-body-color); }
  .itl-process-title strong a { color: inherit; text-decoration: none; }
  .itl-process-title strong a:hover { color: var(--tblr-primary); }
  .itl-process-title .itl-desc { color: var(--tblr-secondary, var(--tblr-muted)); font-size: .82rem; margin-left: .5rem; }

  .itl-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .65rem; margin-top: .65rem; }
  .itl-app-card {
    border: 1px solid var(--tblr-border-color);
    border-left: 4px solid #94a3b8;
    border-radius: .5rem;
    padding: .6rem .75rem;
    background: var(--tblr-bg-surface);
    transition: box-shadow .12s ease, transform .12s ease;
  }
  .itl-app-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
  .itl-app-card.is-critical { border-left-color: #dc2626; }
  .itl-app-topline { display: flex; gap: .3rem; align-items: center; margin-bottom: .3rem; }
  .itl-app-card h5 { margin: 0 0 .25rem; font-size: .92rem; }
  .itl-app-card h5 a { color: var(--tblr-body-color); text-decoration: none; }
  .itl-app-card h5 a:hover { color: var(--tblr-primary); }
  .itl-app-card p { margin: 0 0 .4rem; font-size: .78rem; color: var(--tblr-secondary, var(--tblr-muted)); line-height: 1.35; }
  .itl-app-meta { font-size: .72rem; color: var(--tblr-secondary, var(--tblr-muted)); margin-bottom: .4rem; display: flex; gap: .6rem; flex-wrap: wrap; }
  .itl-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
  .itl-chip {
    font-size: .68rem; font-weight: 500; padding: .12rem .5rem; border-radius: 999px;
    border: 1px solid; color: var(--tblr-body-color);
  }
  .itl-empty-chip { font-size: .7rem; color: var(--tblr-secondary, var(--tblr-muted)); }

  /* Condensed landscape mode */
  .itl-landscape-domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .7rem; align-items: start; }
  .itl-l-domain {
    border-radius: .55rem;
    padding: .6rem .7rem;
    background: color-mix(in srgb, var(--domain-color) 16%, var(--tblr-bg-surface));
    border: 1px solid color-mix(in srgb, var(--domain-color) 35%, var(--tblr-border-color));
    border-top: 4px solid color-mix(in srgb, var(--domain-color) 55%, var(--tblr-primary, #1b75bc));
  }
  .itl-l-domain-title { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
  .itl-l-domain-title h3 { margin: 0; font-size: .88rem; color: var(--tblr-body-color); }
  .itl-l-domain-title h3 a { color: inherit; text-decoration: none; }
  .itl-l-domain-title h3 a:hover { color: var(--tblr-primary); }
  .itl-l-domain-title span { font-size: .7rem; color: var(--tblr-secondary, var(--tblr-muted)); white-space: nowrap; }
  .itl-l-process {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: .45rem;
    padding: .45rem .55rem;
    margin-bottom: .45rem;
  }
  .itl-l-process:last-child { margin-bottom: 0; }
  .itl-l-process > strong { display: block; font-size: .74rem; color: var(--tblr-body-color); margin-bottom: .35rem; }
  .itl-l-apps { display: flex; flex-wrap: wrap; gap: .35rem; }
  .itl-mini {
    flex: 1 1 130px; max-width: 100%;
    border: 1px solid var(--tblr-border-color);
    border-left: 3px solid #94a3b8;
    border-radius: .4rem;
    padding: .3rem .45rem;
    background: var(--tblr-bg-surface-secondary, var(--tblr-bg-surface));
    min-width: 0;
  }
  .itl-mini.is-critical { border-left-color: #dc2626; }
  .itl-mini-top { display: flex; justify-content: space-between; align-items: center; gap: .3rem; margin-bottom: .15rem; }
  .itl-mini-top .badge { font-size: .6rem; padding: .1rem .3rem; }
  .itl-mini-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }
  .itl-mini h6 { margin: 0 0 .15rem; font-size: .7rem; line-height: 1.2; }
  .itl-mini h6 a { color: var(--tblr-body-color); text-decoration: none; }
  .itl-mini h6 a:hover { color: var(--tblr-primary); }
  .itl-mini-foot { display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
  .itl-mini-host { font-size: .6rem; color: var(--tblr-secondary, var(--tblr-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .itl-iface-dots { display: flex; gap: .15rem; flex-shrink: 0; }
  .itl-iface-dot { width: .45rem; height: .45rem; border-radius: 50%; }

  @media print {
    .itl-toolbar form, .itl-view-toggle, #navbar, .navbar, footer { display: none !important; }
    .itl-etab { break-inside: avoid-page; box-shadow: none; }
    .itl-l-domain, .itl-app-card { break-inside: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }
</style>

<div class="itl-toolbar">
  <div class="me-auto">
    <h1 class="mb-0">{% trans "Business view" %}</h1>
    <div class="text-muted">{% if view_mode == 'paysage' %}{% trans "Condensed landscape view" %}{% else %}{% trans "Facilities, domains, processes and applications" %}{% endif %}</div>
  </div>

  <div class="btn-group itl-view-toggle" role="group" aria-label="{% trans 'Display mode' %}">
    <a href="?view=detail{% if filter_site_id %}&site_id={{ filter_site_id }}{% endif %}{% if filter_criticality %}&criticality={{ filter_criticality }}{% endif %}{% if filter_q %}&q={{ filter_q|urlencode }}{% endif %}"
       class="btn btn-sm {% if view_mode == 'detail' %}btn-primary{% else %}btn-outline-secondary{% endif %}">{% trans "Detailed" %}</a>
    <a href="?view=paysage{% if filter_site_id %}&site_id={{ filter_site_id }}{% endif %}{% if filter_criticality %}&criticality={{ filter_criticality }}{% endif %}{% if filter_q %}&q={{ filter_q|urlencode }}{% endif %}"
       class="btn btn-sm {% if view_mode == 'paysage' %}btn-primary{% else %}btn-outline-secondary{% endif %}">{% trans "Landscape" %}</a>
  </div>

  <form method="get" class="d-flex flex-wrap gap-2 align-items-end">
    <input type="hidden" name="view" value="{{ view_mode }}">
    <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 'Name, vendor…' %}">
    </div>
    <button type="submit" class="btn btn-sm btn-primary">{% trans "Filter" %}</button>
    {% if filter_q or filter_site_id or filter_criticality %}
      <a href="{% url 'plugins:netbox_it_landscape:business_landscape' %}?view={{ view_mode }}" class="btn btn-sm btn-outline-secondary">{% trans "Reset" %}</a>
    {% endif %}
  </form>
</div>

{% if not sites %}
  <div class="alert alert-info">
    {% trans "No application matches these criteria." %}
    {% if not filter_q and not filter_site_id and not filter_criticality %}
      {% url 'plugins:netbox_it_landscape:setup_wizard' as wizard_url %}
      {% blocktrans %}Use the <a href="{{ wizard_url }}">setup wizard</a> or import your data with <code>manage.py import_it_landscape</code>.{% endblocktrans %}
    {% endif %}
  </div>
{% endif %}

{% if view_mode == 'paysage' %}

  {% for entry in sites %}
    <section class="card itl-etab">
      <div class="card-body">
        <div class="itl-etab-header">
          <h2 class="mb-0"><a href="{{ entry.site.get_absolute_url }}">{{ entry.site.name }}</a></h2>
          <div class="itl-etab-stats">
            <span class="badge text-bg-secondary">{{ entry.domains|length }} {% trans "domains" %}</span>
            <span class="badge text-bg-blue">{{ entry.app_count }} {% trans "applications" %}</span>
            {% if entry.critical_count %}
              <span class="badge text-bg-red">{{ entry.critical_count }} {% trans "critical" %}</span>
            {% endif %}
          </div>
        </div>

        <div class="itl-landscape-domains">
          {% for dom in entry.domains %}
            <div class="itl-l-domain" style="--domain-color: #{{ dom.domain.color }};">
              <div class="itl-l-domain-title">
                <h3><a href="{{ dom.domain.get_absolute_url }}">{{ dom.domain.name }}</a></h3>
                <span>{{ dom.app_count }} {% trans "apps" %}</span>
              </div>
              {% for proc in dom.processes %}
                <div class="itl-l-process">
                  <strong>{{ proc.process.name }}</strong>
                  <div class="itl-l-apps">
                    {% for app in proc.applications %}
                      <div class="itl-mini {% if app.is_critical %}is-critical{% endif %}">
                        <div class="itl-mini-top">
                          <h6><a href="{{ app.obj.get_absolute_url }}">{{ app.obj.name }}</a></h6>
                          <span class="itl-mini-dot" style="background: {% if app.is_critical %}#dc2626{% else %}#64748b{% endif %};" title="{{ app.obj.get_criticality_display }}"></span>
                        </div>
                        {% if app.obj.is_multi_site %}<span class="badge text-bg-purple mb-1" style="font-size: .55rem;">{% trans "Multi-site" %}</span>{% endif %}
                        <div class="itl-mini-foot">
                          <span class="itl-mini-host">{{ app.obj.hosting|default:'' }}</span>
                          <span class="itl-iface-dots">
                            {% for chip in app.chips %}
                              <span class="itl-iface-dot" style="background: {{ chip.color }};" title="{{ chip.label }}"></span>
                            {% endfor %}
                          </span>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              {% endfor %}
            </div>
          {% endfor %}
        </div>
      </div>
    </section>
  {% endfor %}

{% else %}

  {% for entry in sites %}
    <section class="card itl-etab">
      <div class="card-body">
        <div class="itl-etab-header">
          <h2 class="mb-0"><a href="{{ entry.site.get_absolute_url }}">{{ entry.site.name }}</a></h2>
          <div class="itl-etab-stats">
            <span class="badge text-bg-secondary">{{ entry.domains|length }} {% trans "domains" %}</span>
            <span class="badge text-bg-blue">{{ entry.app_count }} {% trans "applications" %}</span>
            {% if entry.critical_count %}
              <span class="badge text-bg-red">{{ entry.critical_count }} {% trans "critical" %}</span>
            {% endif %}
          </div>
        </div>

        {% for dom in entry.domains %}
          <details class="itl-domain" open style="--domain-color: #{{ dom.domain.color }};">
            <summary>
              <span class="itl-domain-title">
                <strong><a href="{{ dom.domain.get_absolute_url }}">{{ dom.domain.name }}</a></strong>
                {% if dom.domain.description %}<em>{{ dom.domain.description }}</em>{% endif %}
              </span>
              <span class="d-flex gap-2 align-items-center">
                <span class="badge text-bg-secondary">{{ dom.processes|length }} {% trans "processes" %}</span>
                <span class="badge text-bg-blue">{{ dom.app_count }} {% trans "apps" %}</span>
                {% if dom.critical_count %}<span class="badge text-bg-red">{{ dom.critical_count }} {% trans "critical" %}</span>{% endif %}
              </span>
            </summary>

            {% for proc in dom.processes %}
              <details class="itl-process" open>
                <summary>
                  <span class="itl-process-title">
                    <strong><a href="{{ proc.process.get_absolute_url }}">{{ proc.process.name }}</a></strong>
                    {% if proc.process.description %}<span class="itl-desc">{{ proc.process.description }}</span>{% endif %}
                  </span>
                  <span class="d-flex gap-2 align-items-center">
                    <span class="badge text-bg-secondary">{{ proc.applications|length }} {% trans "apps" %}</span>
                    {% if proc.critical_count %}<span class="badge text-bg-red">{{ proc.critical_count }} {% trans "critical" %}</span>{% endif %}
                  </span>
                </summary>
                <div class="itl-app-grid">
                  {% for app in proc.applications %}
                    <article class="itl-app-card {% if app.is_critical %}is-critical{% endif %}">
                      <div class="itl-app-topline">
                        <span class="badge text-bg-{{ app.obj.get_criticality_color }}">{{ app.obj.get_criticality_display }}</span>
                        {% if app.obj.is_multi_site %}<span class="badge text-bg-purple">{% trans "Multi-site" %}</span>{% endif %}
                      </div>
                      <h5><a href="{{ app.obj.get_absolute_url }}">{{ app.obj.name }}</a></h5>
                      <p>{{ app.obj.description|default:_('No description.') }}</p>
                      <div class="itl-app-meta">
                        <span>{{ app.obj.hosting|default:_('Hosting not specified') }}</span>
                      </div>
                      <div class="itl-chips">
                        {% for chip in app.chips %}
                          <span class="itl-chip" style="border-color: {{ chip.color }}; background: {{ chip.bg }};">{{ chip.label }}</span>
                        {% empty %}
                          <span class="itl-empty-chip">{% trans "No active interface" %}</span>
                        {% endfor %}
                      </div>
                    </article>
                  {% endfor %}
                </div>
              </details>
            {% endfor %}
          </details>
        {% endfor %}
      </div>
    </section>
  {% endfor %}

{% endif %}
{% endblock %}