<!-- bedrock_server_manager//web/templates/configure_permissions.html -->
{% extends "base.html" %}

{% block title %}{{ super() }} - Configure Permissions: {{ server_name }}{% endblock %}

{% block content %}
<h2>Configure Player Permissions</h2>
<p style="margin-bottom: 15px;" data-server-name="{{ server_name | e }}">
    Server: <strong>{{ server_name }}</strong>
    {% if new_install %}
    <br><span class="step-indicator">(Step 3 of 4 for New Installation)</span>
    {% endif %}
</p>

<div id="status-message-area" class="message-box" style="opacity: 0; transition: opacity 0.5s ease-out;"></div>
<div id="validation-error-area" class="message-box message-error" style="margin-bottom: 15px; display: none;"></div>

<div id="permissions-loader" class="loader-container">
    <div class="spinner"></div>
    <p>Loading permissions data...</p>
</div>

<section id="install-config-page" data-server-name="{{ server_name | e }}" data-is-new-install="{{ new_install | tojson }}" class="permissions-config-section" style="display:none;">
    <p>Set the permission level for each known player found in the global player list or existing permissions file.</p>
    {# The following div was used in a previous version of this template. The current one uses a table. #}
    {# <div id="permissions-list" class="form-grid permissions-grid">
        #}
        <!-- Player permission rows will be dynamically inserted here by JavaScript -->
        {#
    </div> #}

    <div class="table-responsive-wrapper">
        <table class="server-table">
            <thead>
                <tr>
                    <th scope="col">Player Name</th>
                    <th scope="col">XUID</th>
                    <th scope="col" style="min-width: 150px;">Permission Level</th>
                </tr>
            </thead>
            <tbody id="permissions-table-body">
                {# Initial loader row, will be replaced by JS #}
                <tr>
                    <td colspan="3">
                        <div id="permissions-loader-inline" class="loader-container-small" style="display:none;">
                            {# Initially hidden, shown by JS if needed #}
                            <div class="spinner"></div>
                            <p>Loading player and permission data...</p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <template id="player-row-template">
        <tr>
            <td data-label="Player Name" class="player-name">PlayerName</td>
            <td data-label="XUID" class="player-xuid">PlayerXUID</td>
            <td data-label="Permission Level">
                <select name="player-xuid" class="form-input permission-select">
                    <option value="visitor">Visitor</option>
                    <option value="member" selected>Member</option> {# Default to member #}
                    <option value="operator">Operator</option>
                </select>
                <div class="validation-error inline-error"></div>
            </td>
        </tr>
    </template>
    <template id="no-players-row-template">
        <tr class="no-servers-row">
            {# Use consistent class if desired #}
            <td colspan="3" class="no-servers">
                No players found in the global player database or this server's permissions file. Add players via CLI or ensure server logs are scanned.
            </td>
        </tr>
    </template>

    <div class="form-actions">
        <button type="button" class="action-button start-button" id="save-permissions-btn">
            Save Permissions
        </button>
        {% if new_install %}
        <a href="{{ request.url_for('configure_service_page', server_name=server_name) ~ ('?new_install=true' if new_install else '') if request else '#' }}" class="action-link">
            Skip & Go to Service Config »
        </a>
        <a href="{{ request.url_for('configure_allowlist_page', server_name=server_name) ~ ('?new_install=true' if new_install else '') if request else '#' }}" class="action-link">
            « Back to Allowlist
        </a>
        {% else %}
        <a href="{{ request.url_for('index') if request else '/' }}" class="action-link">
            « Back to Dashboard
        </a>
        {% endif %}
    </div>
</section>
{% endblock %}