{% extends "app_home/tw4/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/tw4/_sidebar.html' %}
{% endblock %}


{% block content %}

<!-- Page title -->
<div class="mb-6">
  <h1 class="text-2xl font-bold text-gray-900">{% translate "Configuration" %}</h1>
  <p class="text-sm text-gray-400 mt-1">{% translate 'Select a service to configure' %}</p>
</div>

<!-- App selector — pill style from form.html "Interests" pattern -->
<div class="flex flex-wrap gap-2 mb-8">
  {% for app in apps %}
  <a href="{% url 'app_home:configuration' app %}"
     class="px-4 py-1.5 text-sm rounded-full border transition select-none
            {% if app.keyname == appname %}bg-indigo-600 text-white border-indigo-600
            {% else %}border-gray-200 text-gray-600 hover:bg-indigo-600 hover:text-white hover:border-indigo-600{% endif %}">
    {{ app.keyname }}
  </a>
  {% endfor %}
</div>


{% if appname %}

<!-- Form card — form.html "Account Settings" card pattern -->
<section class="bg-white rounded-2xl shadow-sm overflow-hidden max-w-3xl">

  <!-- Card header -->
  <div class="px-8 py-5 border-b border-gray-100">
    <h2 class="font-bold text-gray-800 text-lg">{{ appname }}</h2>
    <p class="text-sm text-gray-400 mt-0.5">{% translate 'Update settings for this service' %}</p>
  </div>

  <form method="post" class="px-8 py-2">
    {% csrf_token %}

    <!-- One row per field — label + widget stacked, divided by border -->
    {% for field in form %}
    <div class="py-5 border-b border-gray-100 last:border-b-0
                [&_input]:w-full [&_input]:border [&_input]:border-gray-300
                [&_input]:rounded-lg [&_input]:px-4 [&_input]:py-2.5
                [&_input]:text-sm [&_input]:outline-none [&_input]:transition
                [&_select]:w-full [&_select]:border [&_select]:border-gray-300
                [&_select]:rounded-lg [&_select]:px-4 [&_select]:py-2.5
                [&_select]:text-sm [&_select]:bg-white [&_select]:outline-none
                [&_textarea]:w-full [&_textarea]:border [&_textarea]:border-gray-300
                [&_textarea]:rounded-lg [&_textarea]:px-4 [&_textarea]:py-2.5
                [&_textarea]:text-sm [&_textarea]:outline-none [&_textarea]:resize-none">

      {% if field.errors %}
      <p class="text-xs text-red-500 mb-1">{{ field.errors.0 }}</p>
      {% endif %}

      <label for="{{ field.id_for_label }}"
             class="block text-sm font-medium text-gray-700 mb-1.5">
        {{ field.label }}{% if field.field.required %} <span class="text-red-500">*</span>{% endif %}
      </label>

      {{ field }}

      {% if field.help_text %}
      <p class="text-xs text-gray-400 mt-1">{{ field.help_text }}</p>
      {% endif %}

    </div>
    {% endfor %}

    <!-- Actions -->
    <div class="flex justify-end py-6">
      <button type="submit" name="save"
              class="px-5 py-2.5 text-sm font-semibold bg-indigo-600 text-white
                     rounded-lg hover:bg-indigo-700 transition">
        <i class="fa-solid fa-floppy-disk fa-fw mr-1"></i>
        {% translate 'Save' %} {{ appname }}
      </button>
    </div>

  </form>
</section>

{% endif %}

{% endblock %}