{% extends 'admin/base_site.html' %}
{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}
{% block nav_tags %}active{% endblock %}

{% block topbar_actions %}
<a href="{% url 'admin_events:tag_list' %}" class="btn btn-outline btn-sm">&larr; Back to Tags</a>
{% endblock %}

{% block content %}
<div class="panel-form-narrow">
  <form method="post">
    {% csrf_token %}
    <div class="card mb-3">
      <div class="card-body">
        <p class="panel-section-title mb-3">Tag Details</p>
        <div class="form-group">
          <label class="form-label">Name <span class="required-star">*</span></label>
          <input type="text" name="name" value="{{ tag.name|default:'' }}" class="form-input" required placeholder="e.g. Technology">
        </div>
        <div class="form-group">
          <label class="form-label">Color</label>
          <div class="flex items-center gap-2">
            <input type="color" name="color" value="{{ tag.color|default:'#6366f1' }}" class="form-input" style="width:60px;height:38px;padding:2px;cursor:pointer;">
            <span class="text-sm text-muted">Pick a color for this tag badge</span>
          </div>
        </div>
        {% if tag %}
        <div class="alert alert-info text-sm mt-2">
          This tag is used in <strong>{{ tag.events.count }}</strong> event(s).
        </div>
        {% endif %}
      </div>
    </div>
    <div class="flex gap-2">
      <button type="submit" class="btn btn-gradient">{{ action }} Tag</button>
      <a href="{% url 'admin_events:tag_list' %}" class="btn btn-outline">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}