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

{% block title %}{{ 'admin.custom_fields.title'|trans }}{% endblock %}

{% block body %}
<div class="container-fluid">
    {% include 'administration/custom_fields/_subnav.html.twig' %}

    <div class="admin-card p-4">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
            <div>
                <h1 class="h2 gradient-text fw-bold mb-1">
                    <i class="bi bi-input-cursor me-2"></i>
                    {{ 'admin.custom_fields.title'|trans }}
                </h1>
                <p class="text-muted mb-0">{{ 'admin.custom_fields.description'|trans }}</p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-md-6">
                <div class="border rounded-3 p-4 h-100 d-flex flex-column">
                    <div class="d-flex align-items-center mb-3">
                        <span class="rounded-3 bg-primary bg-opacity-10 p-3 me-3">
                            <i class="bi bi-collection text-primary fs-4"></i>
                        </span>
                        <div>
                            <h2 class="h5 fw-bold mb-0">{{ 'admin.custom_fields.field_sets'|trans }}</h2>
                            <p class="text-muted small mb-0">{{ 'admin.custom_fields.sets_description'|trans }}</p>
                        </div>
                    </div>
                    <a href="{{ path('admin_custom_field_sets') }}" class="btn btn-primary mt-auto align-self-start">
                        <i class="bi bi-collection me-2"></i>
                        {{ 'admin.custom_fields.manage_sets'|trans }}
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded-3 p-4 h-100 d-flex flex-column">
                    <div class="d-flex align-items-center mb-3">
                        <span class="rounded-3 bg-success bg-opacity-10 p-3 me-3">
                            <i class="bi bi-list-ul text-success fs-4"></i>
                        </span>
                        <div>
                            <h2 class="h5 fw-bold mb-0">{{ 'admin.custom_fields.fields'|trans }}</h2>
                            <p class="text-muted small mb-0">{{ 'admin.custom_fields.fields_description'|trans }}</p>
                        </div>
                    </div>
                    <a href="{{ path('admin_custom_fields_list') }}" class="btn btn-success mt-auto align-self-start">
                        <i class="bi bi-list-ul me-2"></i>
                        {{ 'admin.custom_fields.manage_fields'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}