{% extends 'base.html.twig' %}

{% block title %}Tags{% endblock %}

{% block body %}
<div class="page-wrapper">
    {% include 'shared/_page_header.html.twig' with {
        title: 'Tags',
        icon: 'fa-tags',
        subtitle: 'Verwalten Sie Ihre Auftragstags',
        primary_url: path('tag_new'),
        primary_label: 'Neuer Tag'
    } %}

    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Farbe</th>
                    <th>Aktionen</th>
                </tr>
            </thead>
            <tbody>
                {% for tag in tags %}
                    {% if tag.aktiv %}
                    <tr>
                        <td>
                            <div class="table-title">
                                <i class="fas fa-tag tag-dynamic-color-icon tag-icon-mr" style="--tag-farbe: {{ tag.farbe }}"></i>
                                {{ tag.name }}
                            </div>
                        </td>
                        <td>
                            <div class="color-preview-wrapper">
                                <div class="color-preview-box tag-dynamic-color-box" style="--tag-farbe: {{ tag.farbe }}"></div>
                                <span class="color-code">{{ tag.farbe }}</span>
                            </div>
                        </td>
                        <td class="table-actions">
                            <a href="{{ path('tag_edit', {id: tag.id}) }}" class="btn-icon" title="Bearbeiten">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form method="post" action="{{ path('tag_deactivate', {id: tag.id}) }}" class="form-delete-inline">
                                <input type="hidden" name="_token" value="{{ csrf_token('deactivate' ~ tag.id) }}">
                                <button type="submit" class="btn-icon" title="Deaktivieren">
                                    <i class="fas fa-eye-slash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endif %}
                {% else %}
                    <tr>
                        <td colspan="3" class="table-empty">
                            <i class="fas fa-tags"></i>
                            <p>Keine Tags gefunden</p>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% set inaktiveTags = tags|filter(t => not t.aktiv) %}
    {% if inaktiveTags|length > 0 %}
        <div class="table-container table-container-inaktive">
            <h2 class="section-subtitle">
                <i class="fas fa-archive"></i> Inaktive Tags
            </h2>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Farbe</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tag in inaktiveTags %}
                        <tr class="row-inactive">
                            <td>
                                <div class="table-title">
                                    <i class="fas fa-tag tag-dynamic-color-icon tag-icon-mr" style="--tag-farbe: {{ tag.farbe }}"></i>
                                    {{ tag.name }}
                                </div>
                            </td>
                            <td>
                                <div class="color-preview-wrapper">
                                    <div class="color-preview-box tag-dynamic-color-box" style="--tag-farbe: {{ tag.farbe }}"></div>
                                    <span class="color-code">{{ tag.farbe }}</span>
                                </div>
                            </td>
                            <td class="table-actions">
                                <a href="{{ path('tag_edit', {id: tag.id}) }}" class="btn-icon" title="Bearbeiten">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form method="post" action="{{ path('tag_deactivate', {id: tag.id}) }}" class="form-delete-inline">
                                    <input type="hidden" name="_token" value="{{ csrf_token('deactivate' ~ tag.id) }}">
                                    <button type="submit" class="btn-icon" title="Aktivieren">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>
{% endblock %}