{% extends 'layouts/admin.twig' %}

{% block head %}
    <link rel="stylesheet" href="/modules/BlockRegistry/admin/css/block_registry.css">
{% endblock %}

{% block content %}

    <ul class="breadcrumbs el">
        <li><a href="/admin/">Admin</a> /</li>
        <li class="end">Block Registry</li>
    </ul>

    <h1>{{ title }}</h1>

    {% include 'admin/block_registry/_tabnav.twig' with { active_tab: 'blocks' } %}

    {% for message in messages %}
        <div class="alert alert-{{ message.type }}">
            {{ message.content }}
        </div>
    {% endfor %}

    {% if blocks|length > 0 %}
        <div class="block-registry-toolbar">
            <div class="toolbar-left">
                <label for="categoryFilter">Category:</label>
                <select id="categoryFilter">
                    <option value="">All Categories</option>
                    {% for category in categories %}
                        <option value="{{ category.slug }}">{{ category.name }}</option>
                    {% endfor %}
                    <option value="uncategorized">Uncategorized</option>
                </select>
                <span id="blockCount" class="block-count">{{ blocks|length }} blocks</span>
            </div>
        </div>

        <table class="manage-items" id="blocksTable">
            <thead>
                <tr>
                    <th width="40">#</th>
                    <th class="sortable" data-sort="name">
                        Name <i class="fa fa-sort"></i>
                    </th>
                    <th class="sortable" data-sort="category">
                        Category <i class="fa fa-sort"></i>
                    </th>
                    <th>Slug</th>
                    <th width="60">Fields</th>
                    <th width="80">Status</th>
                    <th width="120">Actions</th>
                </tr>
            </thead>
            <tbody class="tabular">
                {% for block in blocks %}
                <tr data-category="{{ block.category_id ? block.category.slug : 'uncategorized' }}"
                    data-name="{{ block.name|lower }}"
                    data-category-name="{{ block.category_id ? block.category.name|lower : 'zzz_uncategorized' }}">
                    <td>{{ block.id }}</td>
                    <td>
                        <i class="fa {{ block.icon ?? 'fa-cube' }}"></i>
                        <strong>{{ block.name }}</strong>
                    </td>
                    <td>
                        {% if block.category_id and block.category %}
                            <span class="category-tag">
                                <i class="fa {{ block.category.icon ?? 'fa-folder' }}"></i>
                                {{ block.category.name }}
                            </span>
                        {% else %}
                            <span class="category-tag uncategorized">Uncategorized</span>
                        {% endif %}
                    </td>
                    <td><code>{{ block.slug }}</code></td>
                    <td>{{ block.fields|length }}</td>
                    <td>
                        {% if is_production is defined and is_production %}
                            <span class="tag {{ block.is_active ? 'tag-green' : 'tag-grey' }}">
                                {{ block.is_active ? 'Active' : 'Inactive' }}
                            </span>
                        {% else %}
                            {% if block.is_active %}
                                <button type="button"
                                        class="toggleStatusBtn toggleStatusBtn--active"
                                        data-block-id="{{ block.id }}"
                                        data-active="1">
                                    Active
                                </button>
                            {% else %}
                                <button type="button"
                                        class="toggleStatusBtn toggleStatusBtn--inactive"
                                        data-block-id="{{ block.id }}"
                                        data-active="0">
                                    Inactive
                                </button>
                            {% endif %}
                        {% endif %}
                    </td>
                    <td class="actions">
                        <a href="{{ route('admin.blocks.edit', {'id': block.id}) }}" title="{{ (is_production is defined and is_production) ? 'View' : 'Edit' }}">
                            <i class="fa fa-{{ (is_production is defined and is_production) ? 'eye' : 'pencil' }}"></i>
                        </a>
                        {% if not (is_production is defined and is_production) %}
                            <form action="{{ route('admin.blocks.duplicate', {'id': block.id}) }}" method="POST">
                                <button type="submit" title="Duplicate" class="btn-link">
                                    <i class="fa fa-copy"></i>
                                </button>
                            </form>
                            <button type="button"
                                    title="Delete"
                                    class="btn-link error deleteBlockBtn"
                                    data-block-id="{{ block.id }}"
                                    data-block-name="{{ block.name }}">
                                <i class="fa fa-times-circle"></i>
                            </button>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="empty-state">
            <i class="fa fa-cubes fa-3x"></i>
            <h3>No blocks yet</h3>
            <p>Get started by creating your first block or importing existing structure files.</p>
            <a href="{{ route('admin.blocks.create') }}" class="btn btn-primary">
                <i class="fa fa-plus"></i> Create Block
            </a>
        </div>
    {% endif %}

    <script src="/modules/BlockRegistry/js/block-registry-index.js"></script>

{% endblock %}
