{% 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><a href="{{ route('admin.blocks.index') }}">Block Registry</a> /</li>
        <li class="end">Sync</li>
    </ul>

    <h1>Block Sync</h1>

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

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

    <div class="block-registry-toolbar">
        <div class="toolbar-left">
            {% if counts.in_sync is defined and counts.in_sync > 0 %}
                <span class="tag tag-green">{{ counts.in_sync }} in sync</span>
            {% endif %}
            {% if counts.local_changes is defined and counts.local_changes > 0 %}
                <span class="tag tag-yellow">{{ counts.local_changes }} changed</span>
            {% endif %}
            {% if counts.not_exported is defined and counts.not_exported > 0 %}
                <span class="tag tag-blue">{{ counts.not_exported }} not exported</span>
            {% endif %}
            {% if counts.not_imported is defined and counts.not_imported > 0 %}
                <span class="tag tag-red">{{ counts.not_imported }} not imported</span>
            {% endif %}
        </div>
        <div class="toolbar-right">
            {% if not is_production %}
                <button type="button" class="sync-btn sync-btn--grey js-sync-post" data-url="{{ route('admin.blocks.sync.exportAll') }}" data-confirm="Export all blocks to JSON files?">
                    <i class="fa fa-download"></i> Export All
                </button>
            {% endif %}
            <button type="button" class="sync-btn sync-btn--green js-sync-post" data-url="{{ route('admin.blocks.sync.importAll') }}" data-confirm="Import all blocks from JSON files? This will overwrite current database definitions.">
                <i class="fa fa-upload"></i> Import All
            </button>
        </div>
    </div>

    {% if blocks|length > 0 %}
        <table class="manage-items" id="syncTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Category</th>
                    <th width="130">Status</th>
                    <th width="200" class="center">Actions</th>
                </tr>
            </thead>
            <tbody class="tabular">
                {% for block in blocks %}
                <tr>
                    <td>
                        <i class="fa {{ block.icon is defined ? block.icon : 'fa-cube' }}"></i>
                        <strong>{{ block.name }}</strong>
                    </td>
                    <td><code>{{ block.slug }}</code></td>
                    <td>{{ block.category ?? '-' }}</td>
                    <td>
                        {% if block.status == 'in_sync' %}
                            <span class="tag tag-green">In Sync</span>
                        {% elseif block.status == 'local_changes' %}
                            <span class="tag tag-yellow">Local Changes</span>
                        {% elseif block.status == 'not_exported' %}
                            <span class="tag tag-blue">Not Exported</span>
                        {% elseif block.status == 'not_imported' %}
                            <span class="tag tag-red">Not Imported</span>
                        {% elseif block.status == 'error' %}
                            <span class="tag tag-red">Error</span>
                        {% endif %}
                    </td>
                    <td class="actions">
                        {% if block.status == 'local_changes' %}
                            <button type="button" class="sync-btn sync-btn--yellow js-toggle-diff" data-slug="{{ block.slug }}">
                                <i class="fa fa-exchange"></i> Diff
                            </button>
                        {% endif %}

                        {% if not is_production and block.status != 'not_imported' %}
                            <button type="button" class="sync-btn sync-btn--grey js-sync-post" title="Export to JSON" data-url="{{ route('admin.blocks.sync.export', {'slug': block.slug}) }}" data-confirm="Export '{{ block.name }}' to JSON?">
                                <i class="fa fa-download"></i>
                            </button>
                        {% endif %}

                        {% if block.status != 'not_exported' %}
                            <button type="button" class="sync-btn sync-btn--green js-sync-post" title="Import from JSON" data-url="{{ route('admin.blocks.sync.import', {'slug': block.slug}) }}" data-confirm="Import '{{ block.name }}' from JSON? This will overwrite the current database definition.">
                                <i class="fa fa-upload"></i>
                            </button>
                        {% endif %}
                    </td>
                </tr>
                {% if block.status == 'local_changes' %}
                <tr class="diff-row" data-diff-slug="{{ block.slug }}">
                    <td colspan="5">
                        <div class="diff-content" id="diff-{{ block.slug }}">
                            Loading...
                        </div>
                    </td>
                </tr>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="empty-state">
            <i class="fa fa-refresh fa-3x"></i>
            <h3>No blocks found</h3>
            <p>No block definitions found in the database or JSON files.</p>
        </div>
    {% endif %}

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

{% endblock %}
