{% extends 'base.html' %}

{% block title %}Tags - KeepItGoing{% endblock %}

{% block content %}
<!-- Header -->
<div class="task-pane-header">
    <h1 class="task-pane-title">Tags</h1>
    <span class="task-count">{{ tags|length }} tag{{ tags|length|pluralize }}</span>
</div>

<!-- Create Tag -->
<div style="background: var(--surface); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-lg);">
    <h2 style="font-size: var(--font-lg); margin-bottom: var(--space-md);">Create New Tag</h2>
    <form method="post" style="display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: flex-end;">
        {% csrf_token %}
        <div class="form-group" style="flex: 1; min-width: 200px; margin-bottom: 0;">
            <label class="form-label" for="name">Name</label>
            <input type="text" class="form-input" id="name" name="name" required placeholder="Enter tag name">
        </div>
        <div class="form-group" style="margin-bottom: 0;">
            <label class="form-label" for="color">Color</label>
            <input type="color" id="color" name="color" value="#3B82F6" style="height: 38px; width: 60px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;">
        </div>
        <button type="submit" class="btn btn-primary">Create Tag</button>
    </form>
</div>

<!-- Tag List -->
{% if tags %}
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg);">
    {% for tag in tags %}
    <div style="background: var(--surface); border-radius: var(--radius-md); padding: var(--space-lg); border-left: 4px solid {{ tag.color }};">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm);">
            <h3 style="font-size: var(--font-lg); color: {{ tag.color }}; margin: 0;">{{ tag.name }}</h3>
            {% if tag.is_archived %}
            <span style="font-size: var(--font-xs); background: var(--text-muted); color: var(--bg); padding: 2px 8px; border-radius: 10px;">Archived</span>
            {% endif %}
        </div>
        <p style="color: var(--text-secondary); font-size: var(--font-sm); margin-bottom: var(--space-md);">
            {{ tag.description|default:"No description" }}
        </p>
        <div style="display: flex; gap: var(--space-lg); font-size: var(--font-sm); color: var(--text-muted); margin-bottom: var(--space-md);">
            <span>{{ tag.tasks.count }} tasks</span>
        </div>
        <div style="display: flex; gap: var(--space-sm);">
            <a href="{% url 'dashboard' %}?tag={{ tag.id }}" class="btn btn-secondary btn-sm">View Tasks</a>
            <a href="{% url 'tag-detail' tag.id %}" class="btn btn-secondary btn-sm" style="cursor: pointer; pointer-events: auto;">Edit</a>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <p>No tags created yet.</p>
    <p class="text-muted">Create your first tag above!</p>
</div>
{% endif %}
{% endblock %}