{% extends "layout.html" %}

{% block title %}
  {% if record_id %}Edit {{ resource.label }}{% else %}New {{ resource.label }}{% endif %} — {{ panel_title }}
{% endblock %}

{% block breadcrumb %}
  <nav class="flex flex-wrap items-center gap-1 text-sm text-secondary-400 dark:text-secondary-500">
    <a href="{{ panel_prefix }}/" class="hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors">Dashboard</a>
    <span class="select-none">›</span>
    <a href="{{ panel_prefix }}/{{ resource.slug }}" class="hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors">{{ resource.label_plural }}</a>
    <span class="select-none">›</span>
    <span class="text-secondary-600 dark:text-secondary-300">{% if record_id %}Edit{% else %}New{% endif %}</span>
  </nav>
{% endblock %}

{% block page_heading %}
  <h1 class="text-xl font-semibold text-secondary-900 dark:text-secondary-100">
    {% if record_id %}Edit {{ resource.label }}{% else %}New {{ resource.label }}{% endif %}
  </h1>
{% endblock %}

{% block header_actions %}
  {% if record_id %}
    {% if resource.can_view and has_perm(resource.slug + ':view') %}
    <a href="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/view"
       class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
              text-secondary-600 dark:text-secondary-300 bg-secondary-100 dark:bg-secondary-700
              hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
      </svg>
      View
    </a>
    {% endif %}
    {% for action in resource.form_actions %}
      {% if action.placement == 'header' and has_perm(resource.slug + ':action') %}
      <button type="button"
              data-action-trigger
              data-action-url="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/action/{{ action.key }}"
              data-action-title="{{ action.modal_title }}"
              data-action-fields="{{ action.fields_json() | e }}"
              data-action-confirm="{{ action.confirm or '' }}"
              data-action-submit="{{ action.label }}"
              class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
                     {{ action.button_class }} transition-colors">
        {{ render_icon(action.icon) }}
        {{ action.label }}
      </button>
      {% endif %}
    {% endfor %}
  {% endif %}
{% endblock %}

{% block content %}
<div>

  {% if errors and errors.__all__ %}
  <div class="mb-5 flex items-start gap-3 bg-red-50 border border-red-200 text-red-800
              dark:bg-red-900/30 dark:border-red-700/50 dark:text-red-300
              rounded-xl px-4 py-3 text-sm">
    <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    {{ errors.__all__ }}
  </div>
  {% endif %}

  <form method="post"
        action="{{ panel_prefix }}/{{ resource.slug }}{% if record_id %}/{{ record_id }}{% endif %}">

    {% if resource.form_fields %}
      {%- set _fields = resource.form_fields %}
      {%- set _form_cols = resource.form_cols %}
      {% include "partials/form_grid.html" %}
    {% else %}
      <p class="text-sm text-secondary-500 dark:text-secondary-400 py-4 text-center">
        No form fields defined. Add <code class="font-mono bg-secondary-100 dark:bg-secondary-700 px-1 rounded">form_fields</code>
        to your Resource class.
      </p>
    {% endif %}

    <div class="flex items-center justify-between pt-2 border-t border-secondary-100 dark:border-secondary-700">
      <a href="{{ panel_prefix }}/{{ resource.slug }}"
         class="px-4 py-2 text-sm text-secondary-500 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-100 transition-colors">
        Cancel
      </a>
      <div class="flex flex-wrap gap-2 items-center">
        {# Inline form actions #}
        {% if record_id %}
          {% for action in resource.form_actions %}
            {% if action.placement == 'inline' %}
            <button type="button"
                    data-action-trigger
                    data-action-url="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/action/{{ action.key }}"
                    data-action-title="{{ action.modal_title }}"
                    data-action-fields="{{ action.fields_json() | e }}"
                    data-action-confirm="{{ action.confirm or '' }}"
                    data-action-submit="{{ action.label }}"
                    class="px-4 py-2 text-sm rounded-lg font-medium {{ action.button_class }} transition-colors">
              {{ action.label }}
            </button>
            {% endif %}
          {% endfor %}
        {% endif %}
        {# Save buttons #}
        {% if record_id %}
          <button type="submit" name="_action" value="save_and_continue"
                  class="px-4 py-2 text-sm rounded-lg border border-secondary-200 dark:border-secondary-600
                         hover:bg-secondary-50 dark:hover:bg-secondary-700
                         text-secondary-700 dark:text-secondary-300 transition-colors">
            Save &amp; continue editing
          </button>
        {% endif %}
        <button type="submit"
                class="px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary hover:opacity-90 transition-opacity">
          {% if record_id %}Save changes{% else %}Create {{ resource.label }}{% endif %}
        </button>
      </div>
    </div>
  </form>

</div>
{% endblock %}