{% extends "tungsten/layout/app.html" %}
{% import "tungsten/components/ui.html" as ui %}
{% block content %}
{% if not subheading %}{% set subheading = (resource.get_description(ctx) if operation == 'create' else none) if operation != 'edit' else __('Update the details below and save your changes.') %}{% endif %}
{% set editable = operation in ('create', 'edit') and not trashed %}
{% set back_url = cancel_url if cancel_url is defined and cancel_url else resource.get_url(ctx) %}
{% set extra_actions %}
  {% if editable and not form.has_wizard %}
  <a href="{{ back_url }}" class="{{ ui.button_classes('gray') }}">{{ __('Cancel') }}</a>
  <button type="submit" form="tw-record-form-el" data-tw-keys="mod+s" title="{{ __('Save (Ctrl+S)') }}" class="{{ ui.button_classes('primary') }}">{{ icon('save', 'h-4 w-4') }}<span>{{ __('Create') if operation == 'create' else __('Save changes') }}</span></button>
  {% endif %}
{% endset %}
{% include "tungsten/components/page-header.html" %}

{% if trashed %}
<div class="mb-6 flex items-center gap-3 rounded-xl bg-warning-50 px-4 py-3 text-sm text-warning-800 ring-1 ring-warning-600/20 dark:bg-warning-500/10 dark:text-warning-300">
  {{ icon('triangle-alert', 'h-5 w-5') }}<span>{{ __('This record has been deleted. Restore it to make changes.') }}</span>
</div>
{% endif %}

<form id="tw-record-form-el" {% if editable %}data-tw-unsaved hx-post="{{ ctx.request.url.path }}" hx-target="#{{ form.id }}" hx-swap="outerHTML"{% else %}onsubmit="return false"{% endif %} class="grid gap-6">
  {{ form.render() }}
  {% if editable and not form.has_wizard %}
  <div class="flex flex-wrap items-center gap-3">
    <button type="submit" class="{{ ui.button_classes('primary') }}">{{ icon('save', 'h-4 w-4') }}<span>{{ __('Create') if operation == 'create' else __('Save changes') }}</span></button>
    {% if operation == 'create' %}
    <button type="submit" name="_another" value="1" class="{{ ui.button_classes('gray') }}">{{ __('Create & create another') }}</button>
    {% endif %}
    <a href="{{ back_url }}" class="{{ ui.button_classes('gray', 'link') }} px-2">{{ __('Cancel') }}</a>
  </div>
  {% endif %}
</form>

{% if relations %}
<div class="mt-8" x-data="{ rel: 0 }">
  {% if relations | length > 1 %}
  <nav class="tw-pill-nav mb-4">
    {% for r in relations %}
    <button type="button" @click="rel = {{ loop.index0 }}" class="tw-pill-nav-item" :class="rel === {{ loop.index0 }} && 'tw-pill-nav-item-active'">
      {{ icon(r.manager.icon, 'h-4 w-4') }}{{ r.manager.get_title() }}
      {% if r.badge is not none %}<span class="rounded-full bg-gray-950/5 px-2 text-xs dark:bg-white/10">{{ r.badge }}</span>{% endif %}
    </button>
    {% endfor %}
  </nav>
  {% endif %}
  {% for r in relations %}
  <section x-show="rel === {{ loop.index0 }}" {% if not loop.first %}x-cloak{% endif %}>
    {% if relations | length == 1 %}<h2 class="mb-3 flex items-center gap-2 text-lg font-semibold">{{ icon(r.manager.icon, 'h-5 w-5 text-gray-400') }}{{ r.manager.get_title() }}</h2>{% endif %}
    {{ r.table.render() }}
  </section>
  {% endfor %}
</div>
{% endif %}
{% endblock %}