{% extends "base.html" %}
{% load i18n %}
{% block content %}
<style>
  :root {
    --apple-blue: #0071e3; --apple-text: #1d1d1f; --apple-gray: #86868b;
    --apple-separator: rgba(0, 0, 0, 0.06); --apple-radius-lg: 22px;
    --apple-ease: cubic-bezier(.25, .1, .25, 1);
  }
  .tags-page { max-width: 640px; margin: 0 auto; padding: 2rem 1.25rem 3rem; color: var(--apple-text); }
  .apple-card {
    background: #fff; border-radius: var(--apple-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    padding: 1.6rem 1.6rem 1.8rem;
  }
  .apple-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.3rem; }
  .field { margin-bottom: 1.15rem; }
  .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; }
  .field input, .field textarea {
    width: 100%; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px;
    padding: 0.65rem 0.9rem; font-size: 0.9rem; font-family: inherit; color: var(--apple-text);
    background: var(--apple-bg); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-sizing: border-box;
  }
  .field input:focus, .field textarea:focus {
    outline: none; background: #fff; border-color: rgba(0, 113, 227, 0.5);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14);
  }
  .field .help { font-size: 0.78rem; color: var(--apple-gray); margin-top: 0.35rem; }
  .field .errors { color: #ff3b30; font-size: 0.8rem; margin-top: 0.35rem; }
  .form-actions { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 1.6rem; }
  .apple-btn {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0.45rem 1.1rem;
    border-radius: 980px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
    border: none; cursor: pointer; transition: background 0.25s ease, transform 0.2s var(--apple-ease);
  }
  .apple-btn-secondary { background: #f0f0f3; color: var(--apple-text); }
  .apple-btn-secondary:hover { background: #e5e5ea; }
  .apple-btn-primary { background: var(--apple-blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 113, 227, 0.3); }
  .apple-btn-primary:hover { background: #2487e6; }
  .apple-btn:active { transform: scale(0.96); }
</style>

<div class="tags-page">
    <div class="apple-card">
        <h1>{% if form.instance.pk %}{% trans "Edit Tag" %}{% else %}{% trans "New Tag" %}{% endif %}</h1>
        <form method="post">
            {% csrf_token %}
            {% for field in form %}
            <div class="field">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {% if field.name == 'description' %}
                <textarea name="{{ field.name }}" id="{{ field.id_for_label }}" rows="3">{{ field.value|default:'' }}</textarea>
                {% else %}
                <input type="text" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}">
                {% endif %}
                {% if field.help_text %}<p class="help">{{ field.help_text }}</p>{% endif %}
                {% if field.errors %}<p class="errors">{{ field.errors }}</p>{% endif %}
            </div>
            {% endfor %}
            <div class="form-actions">
                <a href="{% url 'tag-list' %}" class="apple-btn apple-btn-secondary">{% trans "Cancel" %}</a>
                <button type="submit" class="apple-btn apple-btn-primary">{% trans "Save" %}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}