{% extends 'generic/_base.html' %}
{% load helpers %}
{% load form_helpers %}
{% load i18n %}

{% block title %}{% trans "Service Impact" %}{% endblock %}

{% block tabs %}
  <ul class="nav nav-tabs">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" type="button" role="tab">
        {% trans "Impact search" %}
      </button>
    </li>
  </ul>
{% endblock tabs %}

{% block content %}
  <div class="row">
    <div class="col col-8 offset-2 py-3">
      <p class="text-muted">
        {% trans "Pick the kind of object you're about to change or remove, then choose the specific object. Any Service that uses it directly — or depends on a Service that does — is listed below." %}
      </p>
      <form method="get" class="form form-horizontal">
        <ul class="nav nav-pills mb-3" role="tablist">
          {% for field in form %}
            <li class="nav-item" role="presentation">
              <button
                class="nav-link{% if field.name == searched_field or forloop.first and not searched_field %} active{% endif %}"
                type="button"
                role="tab"
                data-bs-toggle="pill"
                data-bs-target="#pane-{{ field.name }}"
              >
                {{ field.label }}
              </button>
            </li>
          {% endfor %}
        </ul>
        <div class="tab-content">
          {% for field in form %}
            <div
              class="tab-pane{% if field.name == searched_field or forloop.first and not searched_field %} active{% endif %}"
              id="pane-{{ field.name }}"
              role="tabpanel"
            >
              <div class="mb-3">
                {{ field.label_tag }}
                {{ field }}
                {% for error in field.errors %}
                  <div class="text-danger">{{ error }}</div>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="text-end">
          <button type="submit" class="btn btn-primary">
            <span class="mdi mdi-magnify" aria-hidden="true"></span> {% trans "Search impact" %}
          </button>
        </div>
      </form>
    </div>
  </div>

  {% if searched_field %}
    <div class="row">
      <div class="col col-8 offset-2">
        <div class="card">
          <h2 class="card-header">{% trans "Directly affected services" %}</h2>
          <table class="table table-hover">
            <tr>
              <th>{% trans "Service ID" %}</th>
              <th>{% trans "Type" %}</th>
              <th>{% trans "Status" %}</th>
              <th>{% trans "Tenant" %}</th>
            </tr>
            {% for service in direct_services %}
              <tr>
                <td>{{ service|linkify }}</td>
                <td>{{ service.get_type_display }}</td>
                <td>{% badge service.get_status_display bg_color=service.get_status_color %}</td>
                <td>{{ service.tenant|linkify|placeholder }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="4">{% trans "No services use this object directly." %}</td>
              </tr>
            {% endfor %}
          </table>
        </div>

        <div class="card">
          <h2 class="card-header">{% trans "Also affected (depend on the services above)" %}</h2>
          <table class="table table-hover">
            <tr>
              <th>{% trans "Service ID" %}</th>
              <th>{% trans "Type" %}</th>
              <th>{% trans "Status" %}</th>
              <th>{% trans "Tenant" %}</th>
            </tr>
            {% for service in cascaded_services %}
              <tr>
                <td>{{ service|linkify }}</td>
                <td>{{ service.get_type_display }}</td>
                <td>{% badge service.get_status_display bg_color=service.get_status_color %}</td>
                <td>{{ service.tenant|linkify|placeholder }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="4">{% trans "No other services depend on the ones above." %}</td>
              </tr>
            {% endfor %}
          </table>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock content %}