{% extends 'generic/_base.html' %}
{% load form_helpers %}
{% block title %}{% if object.pk %}Symbol für {{ object }}{% else %}Neue Symbol-Zuordnung{% endif %}{% endblock %}
{% block content %}
<style>
  .ce-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
  .ce-kind { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .4rem; border: 2px solid var(--tblr-border-color); border-radius: .5rem; cursor: pointer; text-align: center; font-size: .8rem; margin: 0; background: #fff; color: #222; }
  .ce-kind:hover { border-color: var(--tblr-primary); }
  .ce-kind:has(input:checked) { border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .2); }
  .ce-kind input { position: absolute; opacity: 0; pointer-events: none; }
  .ce-kind img, .ce-kind .ce-kind-icon { width: 56px; height: 56px; }
  .ce-kind .ce-kind-icon { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #888; }
  .ce-icon-preview { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--tblr-border-color); border-radius: .25rem; background: #fff; }
</style>

<form method="post" enctype="multipart/form-data" class="mt-3">
  {% csrf_token %}
  {% if form.non_field_errors %}<div class="alert alert-danger">{% for e in form.non_field_errors %}{{ e }}<br>{% endfor %}</div>{% endif %}
  <div class="row g-3">
    <div class="col-lg-4">
      <div class="card h-100">
        <h2 class="card-header"><i class="mdi mdi-link-variant"></i> Gilt für</h2>
        <div class="card-body">
          <p class="text-muted small">Entweder einen Gerätetyp <em>oder</em> eine Geräterolle wählen. Gerätetyp hat Vorrang.</p>
          {% render_field form.device_type %}
          {% render_field form.role %}
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="card">
        <h2 class="card-header"><i class="mdi mdi-shape-outline"></i> Symbol</h2>
        <div class="card-body">
          <div class="ce-kinds mb-3">
            {% for radio in form.kind %}
              <label class="ce-kind" for="{{ radio.id_for_label }}">
                {{ radio.tag }}
                {% if radio.data.value == '' %}<span class="ce-kind-icon"><i class="mdi mdi-auto-fix"></i></span>
                {% elif radio.data.value == 'hidden' %}<span class="ce-kind-icon"><i class="mdi mdi-eye-off-outline"></i></span>
                {% else %}{% for key, label, url in builtin %}{% if key == radio.data.value %}<img src="{{ url }}" alt="">{% endif %}{% endfor %}{% endif %}
                {{ radio.choice_label }}
              </label>
            {% endfor %}
          </div>
          {% for e in form.kind.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}

          <label class="form-label" for="{{ form.icon.id_for_label }}">Eigenes Icon (optional)</label>
          <div class="d-flex gap-3 align-items-start">
            {% if object.icon %}<img src="{{ object.icon.url }}" class="ce-icon-preview" alt="Aktuelles Icon">{% endif %}
            <div class="flex-grow-1">
              {{ form.icon }}
              <div class="form-text">{{ form.icon.help_text }} Ist kein Symbol gewählt, bestimmt die Automatik die Ebene im Diagramm.</div>
              {% for e in form.icon.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex justify-content-end gap-2 mt-3">
    <a href="{% url 'plugins:netbox_customer_export:symbol_list' %}" class="btn btn-outline-secondary">Abbrechen</a>
    <button class="btn btn-primary"><i class="mdi mdi-content-save"></i> Speichern</button>
  </div>
</form>
{% endblock %}