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

{% block breadcrumbs %}
  <li class="breadcrumb-item">
    <a href="/plugins/netbox-nsm/object/custom/types/">{% trans "Custom Types" %}</a>
  </li>
{% endblock %}

{% block title %}{% trans "Install Built-in Types" %}{% endblock %}

{% block controls %}
  <div class="btn-list">
    <a href="/plugins/netbox-nsm/object/custom/types/" class="btn btn-outline-secondary">
      {% trans "Cancel" %}
    </a>
    <button type="submit" form="builtin-install-form" class="btn btn-primary">
      <i class="mdi mdi-download me-1"></i>{% trans "Install Selected" %}
    </button>
  </div>
{% endblock %}

{% block content %}
<form method="post" id="builtin-install-form">
  {% csrf_token %}
  <div class="card">
    <div class="card-body pb-0 px-0">
      <p class="px-3 text-secondary">
        {% trans "Customize the name to install a type multiple times under different names. Existing names will be skipped." %}
      </p>
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th style="width:2rem"></th>
            <th>{% trans "Built-in" %}</th>
            <th>{% trans "Name (editable)" %}</th>
            <th>{% trans "Area" %}</th>
            <th>{% trans "Fields" %}</th>
            <th style="width:6rem"></th>
          </tr>
        </thead>
        <tbody>
          {% for t in builtin_types %}
          <tr>
            <td class="align-middle">
              {% if not t.already_installed %}
              <input type="checkbox" name="selected" value="{{ forloop.counter0 }}"
                class="form-check-input">
              {% endif %}
            </td>
            <td class="align-middle">
              {% if t.icon %}<i class="mdi {{ t.icon }} me-1"></i>{% endif %}
              {{ t.name }}
              {% if t.already_installed %}
                <span class="badge text-bg-success ms-1">installiert</span>
              {% endif %}
            </td>
            <td>
              {% if not t.already_installed %}
              <input type="text" name="name_{{ forloop.counter0 }}" value="{{ t.name }}"
                class="form-control form-control-sm" style="min-width:160px">
              {% else %}
              <span class="text-muted">{{ t.name }}</span>
              {% endif %}
            </td>
            <td class="align-middle">
              <span class="badge text-bg-secondary">{{ t.area }}</span>
            </td>
            <td class="align-middle">
              <small class="text-secondary">
                {% for fd in t.field_definitions %}{% if fd.name %}
                  <code>{{ fd.name }}</code>{% if not forloop.last %}, {% endif %}
                {% endif %}{% empty %}—{% endfor %}
              </small>
            </td>
            <td class="align-middle text-end">
              <button type="button"
                      class="btn btn-sm btn-outline-secondary py-0"
                      data-bs-toggle="collapse"
                      data-bs-target="#src-{{ forloop.counter0 }}"
                      title="Quelltext">
                <i class="mdi mdi-code-json"></i>
              </button>
            </td>
          </tr>
          <tr class="collapse" id="src-{{ forloop.counter0 }}">
            <td colspan="6" class="p-0 border-0">
              <pre class="mb-0 px-3 py-2 bg-body-tertiary" style="font-size:.72rem;max-height:18rem;overflow-y:auto;white-space:pre-wrap;border-bottom:1px solid var(--bs-border-color)">{{ t.field_definitions_json }}</pre>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</form>
{% endblock %}