{% extends "admin_base.html" %}

{% block extra_head %}

{% endblock %}

{% block page_title %}{{ profile.title | default(value="Relational Sheets") }}{% endblock %}

{% block admin_content %}
<div class="rs-admin-shell rs-workbook" data-plugin="relational-sheet"
    data-active-slug="{{ active_slug | default(value='') }}"
    data-allow-edit="{{ allow_profile_editing | default(value=true) }}"
    data-currency="{{ currency_symbol | default(value='₹') }}"
    data-default-page-size="{{ plugin_settings.default_page_size | default(value='50') }}">

    {% if profile_error %}
    <div class="rs-profile-error-banner" role="alert">{{ profile_error }}</div>
    {% endif %}

    <header class="rs-pane rs-pane-toolbar" id="rs-pane-toolbar" data-rs-pane="toolbar">
        <button type="button" class="rs-pane-toggle" aria-expanded="true" aria-controls="rs-pane-toolbar-body" title="Collapse toolbar">
            <i class="fas fa-chevron-up" aria-hidden="true"></i>
        </button>
        <div id="rs-pane-toolbar-body" class="rs-pane-body rs-ribbon">
            <div class="rs-ribbon-title">
                <h2 class="rs-workbook-title" id="rs-workbook-title">{{ profile.title | default(value="Relational Sheets") }}</h2>
                <p class="rs-workbook-subtitle" id="rs-workbook-subtitle">{{ profile.description | default(value="") }}</p>
            </div>
            <div class="rs-sheet-toolbar-actions">
                <a href="/plugins/relational-sheet/admin" class="blocks-button blocks-button-secondary blocks-button-sm" id="rs-manage-profiles" title="Manage sheet profiles">
                    <i class="fas fa-cog"></i> Profiles
                </a>
                <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="rs-reload-sheet">
                    <i class="fas fa-sync"></i> Reload
                </button>
                <button type="button" class="blocks-button blocks-button-primary blocks-button-sm" id="rs-save-sheet" disabled>
                    <i class="fas fa-save"></i> Save
                </button>
            </div>
        </div>
    </header>

    <section class="rs-pane rs-pane-filters is-collapsed" id="rs-pane-filters" data-rs-pane="filters" data-rs-default-collapsed="true" hidden>
        <div class="rs-pane-head">
            <button type="button" class="rs-pane-toggle" aria-expanded="true" aria-controls="rs-pane-filters-body" title="Collapse filters">
                <i class="fas fa-chevron-up" aria-hidden="true"></i>
            </button>
            <span class="rs-pane-label"><i class="fas fa-filter"></i> Filters</span>
        </div>
        <div id="rs-pane-filters-body" class="rs-pane-body">
            <div id="rs-sheet-filters" class="rs-filters-inner"></div>
        </div>
    </section>

    <div class="rs-formula-bar" id="rs-formula-bar" hidden>
        <span class="rs-formula-label" id="rs-formula-label" title="Cell">Cell</span>
        <input type="text" class="rs-formula-input" id="rs-formula-input" spellcheck="false" aria-label="Cell editor">
        <button type="button" class="rs-formula-expand blocks-button blocks-button-secondary blocks-button-sm" id="rs-formula-expand" title="Expand editor (long text)" hidden>
            <i class="fas fa-expand-alt" aria-hidden="true"></i>
        </button>
    </div>

    <div class="rs-grid-stage">
        <div class="rs-sheet-card">
            <div class="rs-grid-wrap" id="rs-grid-wrap">
                <table class="blocks-admin-table rs-grid-table rs-grid-excel" id="rs-sheet-grid">
                    <colgroup id="rs-sheet-cols"></colgroup>
                    <thead id="rs-sheet-head"></thead>
                    <tbody id="rs-sheet-body">
                        <tr><td class="rs-empty-cell">Select a sheet tab below.</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <footer class="rs-status-bar" aria-label="Sheet status">
        <div class="rs-status-left">
            <span id="rs-page-info">—</span>
            <span class="rs-status-sep">|</span>
            <span id="rs-row-count">0 rows</span>
        </div>
        <div class="rs-status-bulk" id="rs-bulk-bar" hidden>
            <span id="rs-selected-count">0 selected</span>
            <select id="rs-bulk-action-select" aria-label="Bulk action"></select>
            <button type="button" class="blocks-button blocks-button-primary blocks-button-sm" id="rs-bulk-run">Apply</button>
        </div>
        <div class="rs-status-right">
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm rs-status-btn" id="rs-prev-page" disabled aria-label="Previous page">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm rs-status-btn" id="rs-next-page" disabled aria-label="Next page">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </footer>

    <footer class="rs-excel-tabs" role="tablist" aria-label="Sheet tabs">
        <div class="rs-excel-tabs-scroll" id="rs-sheet-tabs"></div>
        <button type="button" class="rs-excel-tab rs-excel-tab-add" id="rs-new-sheet-tab" title="New profile" hidden>
            <i class="fas fa-plus"></i>
        </button>
    </footer>

    <div class="rs-cell-expand-overlay" id="rs-cell-expand-overlay" hidden>
        <div class="rs-cell-expand-dialog" role="dialog" aria-labelledby="rs-cell-expand-title">
            <div class="rs-cell-expand-header">
                <span id="rs-cell-expand-title">Edit cell</span>
                <button type="button" class="rs-cell-expand-close blocks-button blocks-button-secondary blocks-button-sm" id="rs-cell-expand-cancel" title="Cancel">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <textarea id="rs-cell-expand-textarea" class="rs-cell-expand-textarea" spellcheck="true"></textarea>
            <div class="rs-cell-expand-footer">
                <span class="rs-cell-expand-hint text-muted">Ctrl+Enter to save · Esc to cancel</span>
                <button type="button" class="blocks-button blocks-button-primary blocks-button-sm" id="rs-cell-expand-ok">OK</button>
            </div>
        </div>
    </div>
</div>

<script type="application/json" id="rs-workbook-profiles">{% if profiles %}{{ profiles | json_encode | replace(from="</script>", to="<\\/script>") | safe }}{% else %}[]{% endif %}</script>
<script type="application/json" id="rs-sheet-config">{% if config %}{{ config | json_encode | replace(from="</script>", to="<\\/script>") | safe }}{% else %}{}{% endif %}</script>
{% endblock %}

{% block scripts %}
<script src="/plugins/relational-sheet/assets/js/relational_sheet_common.js"></script>
<script src="/plugins/relational-sheet/assets/js/relational_sheet_workbook.js"></script>
{% endblock %}