{% extends 'base.html' %}

{% block title %}Edit {{ tag.name }} - KeepItGoing{% endblock %}

{% block content %}
<!-- Header -->
<div class="task-pane-header">
    <h1 class="task-pane-title">Edit Tag</h1>
</div>

<div style="background: var(--surface); border-radius: var(--radius-md); padding: var(--space-xl); max-width: 500px;">
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="next" value="{% url 'tag-list' %}">

        <div class="form-group">
            <label class="form-label" for="name">Name</label>
            <input type="text" class="form-input" id="name" name="name" value="{{ tag.name }}" required>
        </div>

        <div class="form-group">
            <label class="form-label" for="color">Color</label>
            <div style="display: flex; align-items: center; gap: var(--space-md);">
                <input type="color" id="color" name="color" value="{{ tag.color|default:'#3B82F6' }}"
                       style="height: 40px; width: 80px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;">
                <div style="width: 24px; height: 24px; border-radius: 50%; background: {{ tag.color|default:'#3B82F6' }};" id="colorPreview"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label" for="description">Description</label>
            <textarea class="form-input" id="description" name="description" rows="3" placeholder="Optional description">{{ tag.description|default:'' }}</textarea>
        </div>

        <div style="display: flex; gap: var(--space-md); margin-top: var(--space-xl);">
            <button type="submit" class="btn btn-primary">Save Changes</button>
            <a href="{% url 'tag-list' %}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>

    <!-- Delete Section -->
    <div style="margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--border);">
        <h3 style="color: var(--danger); margin-bottom: var(--space-md);">Danger Zone</h3>
        <p style="color: var(--text-secondary); font-size: var(--font-sm); margin-bottom: var(--space-md);">
            Deleting this tag will not delete the tasks with it. Tasks will simply lose this tag.
        </p>
        <form method="post" action="{% url 'tag-delete' tag.id %}" onsubmit="return confirm('Are you sure you want to delete this tag?');">
            {% csrf_token %}
            <input type="hidden" name="next" value="{% url 'tag-list' %}">
            <button type="submit" class="btn" style="background: var(--danger); color: white;">Delete Tag</button>
        </form>
    </div>
</div>

<script>
    // Update color preview when color picker changes
    document.getElementById('color').addEventListener('input', function(e) {
        document.getElementById('colorPreview').style.background = e.target.value;
    });
</script>
{% endblock %}