{% extends "admin/user_datum_change_form.html" %}
{% load static i18n %}

{% block extrahead %}
{{ block.super }}
<style>
  .nav-tabs { list-style: none; padding-left: 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; }
  .nav-tabs li { display: inline-block; margin-right: .5rem; }
  .nav-tabs a { text-decoration: none; padding: .5rem 1rem; display: inline-block; border: 1px solid var(--border-color); border-bottom: none; background: var(--darkened-bg); color: var(--body-fg); border-radius: 4px 4px 0 0; }
  .nav-tabs a.active { background: var(--body-bg); font-weight: bold; }
  .tab-content .tab-pane { display: none; }
  .tab-content .tab-pane.active { display: block; }
  .reference-wrapper { display: flex; gap: 1rem; align-items: flex-start; }
  .reference-wrapper .qr { flex: 0 0 20%; }
  .reference-wrapper .map { flex: 1; }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('#charger-tabs a');
    const panes = document.querySelectorAll('#charger-tabs-content .tab-pane');
    links.forEach(function(link) {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        links.forEach(l => l.classList.remove('active'));
        panes.forEach(p => p.classList.remove('active'));
        link.classList.add('active');
        document.querySelector(link.getAttribute('href')).classList.add('active');
      });
    });
    if (links.length) {
      links[0].classList.add('active');
      panes[0].classList.add('active');
    }
  });
</script>
{% endblock %}

{% block object-tools-items %}
  <li><a href="{{ original.get_absolute_url }}" target="_blank">Landing page</a></li>
  {% if original.reference %}
  <li><a href="{{ original.reference.value }}" target="_blank">Reference</a></li>
  {% endif %}
  {{ block.super }}
{% endblock %}

{% block field_sets %}
<div class="tabbed">
  <ul class="nav-tabs" id="charger-tabs">
    <li><a href="#tab-general" class="active">General</a></li>
      <li><a href="#tab-references">Refs</a></li>
  </ul>
  <div class="tab-content" id="charger-tabs-content">
    <div id="tab-general" class="tab-pane active">
      {% for fieldset in adminform %}
        {% if forloop.first %}
          {% include "admin/includes/fieldset.html" with heading_level=2 prefix="fieldset" id_prefix=0 id_suffix=0 %}
        {% endif %}
      {% endfor %}
    </div>
      <div id="tab-references" class="tab-pane">
      {% for fieldset in adminform %}
        {% if forloop.counter0 == 1 %}
          {% include "admin/includes/fieldset.html" with heading_level=2 prefix="fieldset" id_prefix=0 id_suffix=1 %}
        {% endif %}
      {% endfor %}
      <div class="reference-wrapper">
        {% if original.reference and original.reference.image %}
        <div class="qr">
          <img src="{{ original.reference.image.url }}" alt="{{ original.reference.alt_text|default:'Reference QR' }}" style="width:100%; height:auto;" />
        </div>
        {% endif %}
        <div class="map">
          <div id="charger-map" style="height:400px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}