{% extends "base.html" %}
{% load i18n %}
{% block content %}
<style>
  :root {
    --apple-red: #ff3b30; --apple-text: #1d1d1f; --apple-gray: #86868b;
    --apple-radius-lg: 22px; --apple-ease: cubic-bezier(.25, .1, .25, 1);
  }
  .tags-page { max-width: 560px; 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; text-align: center;
  }
  .warn-icon {
    width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 59, 48, 0.12); color: var(--apple-red);
  }
  .warn-icon svg { width: 1.4rem; height: 1.4rem; }
  .apple-card h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
  .apple-card p.desc { color: var(--apple-gray); font-size: 0.9rem; margin: 0 0 1.6rem; line-height: 1.5; }
  .apple-card p.desc strong { color: var(--apple-text); }
  .form-actions { display: flex; justify-content: center; gap: 0.55rem; }
  .apple-btn {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0.45rem 1.15rem;
    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-danger { background: var(--apple-red); color: #fff; box-shadow: 0 8px 22px rgba(255, 59, 48, 0.3); }
  .apple-btn-danger:hover { background: #ff5147; }
  .apple-btn:active { transform: scale(0.96); }
</style>

<div class="tags-page">
    <div class="apple-card">
        <div class="warn-icon" aria-hidden="true">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
            </svg>
        </div>
        <h1>{% trans "Delete Tag" %}</h1>
        <p class="desc">
            {% blocktrans with tag_name=tag.name %}
            Are you sure you want to delete the tag <strong>"{{ tag_name }}"</strong>? This action cannot be undone.
            {% endblocktrans %}
        </p>
        <form method="post">
            {% csrf_token %}
            <div class="form-actions">
                <a href="{% url 'tag-detail' tag.slug %}" class="apple-btn apple-btn-secondary">{% trans "Cancel" %}</a>
                <button type="submit" class="apple-btn apple-btn-danger">{% trans "Delete" %}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}
