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

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

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

    <form action="{{ route('admin.blocks.global.store') }}" method="POST" class="style">
        <fieldset class="show">
            <h1>Global Block Details</h1>

            <div class="row">
                <label for="name">Name <span class="required">*</span></label>
                <input type="text" name="name" id="name" required placeholder="e.g., Site Announcement Bar, Footer CTA">
                <small class="field-info">A descriptive name to identify this global block</small>
            </div>

            <div class="row">
                <label for="block_id">Block Type <span class="required">*</span></label>
                <select name="block_id" id="block_id" required>
                    <option value="">-- Select Block Type --</option>
                    {% set currentCategory = '' %}
                    {% for block in blocks %}
                        {% set catName = block.category ? block.category.name : 'Uncategorized' %}
                        {% if catName != currentCategory %}
                            {% if currentCategory %}
                                </optgroup>
                            {% endif %}
                            {% set currentCategory = catName %}
                            <optgroup label="{{ currentCategory }}">
                        {% endif %}
                        <option value="{{ block.id }}">
                            {{ block.name }}
                        </option>
                    {% endfor %}
                    {% if currentCategory %}
                        </optgroup>
                    {% endif %}
                </select>
                <small class="field-info">The block type determines which fields will be available</small>
            </div>

            <button type="submit" class="btn btn-primary">
                <i class="fa fa-plus"></i> Create Global Block
            </button>

            <a href="{{ route('admin.blocks.global.index') }}" class="btn btn-secondary">
                Cancel
            </a>
        </fieldset>
    </form>

{% endblock %}
