{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Company Config" %}{% endblock %}

{% block shell_header %}
{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
{% endblock %}

{% block shell_body %}
<div class="page-stack">
  <header class="page-header">
    <div class="page-header-copy">
      <span class="page-eyebrow">{% trans "Administration" %}</span>
      <h1>{% trans "Company Config" %}</h1>
      <p class="page-subtitle">{% trans "Strukturierte Firmendaten, Kontaktpunkte und öffentliche Unternehmenslinks zentral pflegen." %}</p>
    </div>
  </header>

{% include 'workflows/includes/messages.html' %}

<section class="branding-sections">
  {% for section in company_config_sections %}
  <section class="branding-block company-inline-block" data-company-section="{{ section.key }}">
    <div class="branding-block-head company-inline-head">
      <div>
        <h2>{{ section.title }}</h2>
        <p>{{ section.subtitle }}</p>
      </div>
      <button class="btn btn-secondary company-inline-trigger" type="button" data-company-edit-toggle="{{ section.key }}" aria-expanded="{% if editing_company_section == section.key %}true{% else %}false{% endif %}">{% trans "Bearbeiten" %}</button>
    </div>

    <div class="company-inline-view{% if editing_company_section == section.key %} is-hidden{% endif %}" data-company-edit-view="{{ section.key }}">
      <div class="grid">
        {% for row in section.rows %}
        <div class="field{% if row.name == 'street_address' %} field-full{% endif %}">
          <label>{{ row.label }}</label>
          <div class="company-inline-value">{{ row.value|default:"-" }}</div>
        </div>
        {% endfor %}
      </div>
      {% if section.hint %}<div class="hint">{{ section.hint }}</div>{% endif %}
    </div>

    <form method="post" action="{% url 'save_portal_company_config' %}" class="company-inline-form{% if editing_company_section != section.key %} is-hidden{% endif %}" data-company-edit-form="{{ section.key }}">
      {% csrf_token %}
      <input type="hidden" name="section_key" value="{{ section.key }}" />
      <div class="grid">
        {% for row in section.rows %}
        <div class="field{% if row.name == 'street_address' %} field-full{% endif %}{% if row.bound_field.errors %} has-error{% endif %}">
          <label for="{{ row.bound_field.id_for_label }}">{{ row.label }}</label>
          {{ row.bound_field }}
          {% if row.bound_field.errors %}<div class="company-inline-error">{{ row.bound_field.errors|join:", " }}</div>{% endif %}
        </div>
        {% endfor %}
      </div>
      {% if section.hint %}<div class="hint">{{ section.hint }}</div>{% endif %}
      <div class="company-inline-actions">
        <button class="btn btn-primary" type="submit">{% trans "Speichern" %}</button>
        <button class="btn btn-secondary" type="button" data-company-edit-cancel="{{ section.key }}">{% trans "Abbrechen" %}</button>
      </div>
    </form>
  </section>
  {% endfor %}

  <div class="toolbar" style="margin-top:1rem;">
    <div class="hint">{% trans "Diese Ebene ist bewusst von Branding getrennt: Hier geht es um strukturierte Firmendaten, nicht um visuelle Gestaltung." %}</div>
  </div>
</section>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  (function () {
    function setMode(key, editing) {
      var view = document.querySelector('[data-company-edit-view="' + key + '"]');
      var form = document.querySelector('[data-company-edit-form="' + key + '"]');
      var toggle = document.querySelector('[data-company-edit-toggle="' + key + '"]');
      if (!view || !form || !toggle) return;
      view.classList.toggle('is-hidden', editing);
      form.classList.toggle('is-hidden', !editing);
      toggle.setAttribute('aria-expanded', editing ? 'true' : 'false');
    }
    document.querySelectorAll('[data-company-edit-toggle]').forEach(function (button) {
      var key = button.getAttribute('data-company-edit-toggle');
      button.addEventListener('click', function () { setMode(key, true); });
    });
    document.querySelectorAll('[data-company-edit-cancel]').forEach(function (button) {
      var key = button.getAttribute('data-company-edit-cancel');
      button.addEventListener('click', function () { setMode(key, false); });
    });
  }());
</script>
{% endblock %}