<!-- bedrock_server_manager//web/templates/index.html -->
{# Extends the base layout template #}
{% extends "base.html" %}

{# --- Page Title Block --- #}
{% block title %}{{ super() }} - Dashboard{% endblock %}

{# --- Main Content Block --- #}
{% block content %}

    {# Area for JavaScript-driven status messages (e.g., from server actions) #}
<div id="status-message-area" class="message-box" style="opacity: 0; transition: opacity 0.5s ease-out;">
    <!-- Status messages appear here -->
</div>

    {# Server-side flash messages (handled by base.html via query params) #}

    {# --- Main Page Layout (Sidebar + Content) --- #}
<div class="page-layout">

    {# --- Sidebar Navigation --- #}
    <aside class="sidebar-nav">
        <a href="#overview-section" class="nav-link active" data-target="overview-section">Overview</a>

        <div class="nav-item">
            <a href="#" class="nav-link has-submenu">Server Management</a>
            <div class="submenu">
                <a href="#manage-section" class="nav-link" data-target="manage-section">Manage Servers</a>
                {% if current_user.role != 'user' %}
                <a href="#configure-section" class="nav-link" data-target="configure-section">Configure</a>
                <a href="#backup-restore-section" class="nav-link" data-target="backup-restore-section">Backup/Restore</a>
                {% endif %}
            </div>
        </div>

        {% if current_user.role == 'admin' %}
        <div class="nav-item">
            <a href="#" class="nav-link has-submenu">Extras</a>
            <div class="submenu">
                <a href="#content-section" class="nav-link" data-target="content-section">Manage Content</a>
                <a href="{{ request.url_for('manage_plugins_page') if request else '/plugins/' }}" class="nav-link">Manage Plugins</a>
            </div>
        </div>
        {% endif %}

        <div class="nav-item">
            <a href="#" class="nav-link has-submenu">Settings</a>
            <div class="submenu">
                <a href="{{ url_for('account_page') }}" class="nav-link">Account Management</a>
                {% if current_user and current_user.role == 'admin' %}
                <a href="{{ url_for('users_page') }}" class="nav-link">User Management</a>
                {% endif %}
                {% if current_user.role == 'admin' %}
                <a href="{{ request.url_for('manage_settings_page') if request else '/settings' }}" class="nav-link">Global Settings</a>
                {% endif %}
            </div>
        </div>

        {# --- Plugin Web Pages Submenu --- #}
        {% if plugin_html_pages %}
        <div class="nav-item">
            <a href="#" class="nav-link has-submenu">From Plugins</a>
            <div class="submenu">
                {% for page in plugin_html_pages %}
                <a href="{{ page.path }}" class="nav-link plugin-page-link" title="{{ page.name }}">{{ page.name }}</a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {# --- End Plugin Web Pages Submenu --- #}

        {# Separator #}
        <hr class="nav-separator">

        {# Actions #}
        {% if current_user.role == 'admin' %}
        <a href="{{ request.url_for('install_server_page') if request else '/install' }}" class="nav-link nav-action-button install-server-button">Install New Server</a>
        {% endif %}
        <a href="{{ request.url_for('logout') if request else '/auth/logout' }}" class="nav-link nav-action-button danger-button">Logout</a>
    </aside> {# --- End Sidebar Navigation --- #}


    {# --- Main Content Area --- #}
    <main class="main-content">

        {# --- Server Selection Dropdown and Global Actions --- #}
        {# This section remains visible regardless of the selected sidebar tab #}
        <section class="server-selection-section">
            <div class="select-server-group">
                <label for="server-select" class="select-label">Selected Server:</label>
                <select id="server-select" name="server" class="server-dropdown form-input" disabled title="Loading servers...">
                    <option value="" selected>-- Loading Servers --</option>
                </select>
            </div>
            {# Action buttons targeting the selected server #}
            <div class="action-buttons-group">
                {# JS functions in server_actions.js use getSelectedServer() #}
                {% if current_user.role != 'user' %}
                <button type="button" id="start-server-btn" class="action-button start-button" title="Start selected server" disabled>Start</button>
                <button type="button" id="stop-server-btn" class="action-button danger-button" title="Stop selected server" disabled>Stop</button>
                <button type="button" id="restart-server-btn" class="action-button" title="Restart selected server" disabled>Restart</button>
                <button type="button" id="prompt-command-btn" class="action-button" title="Send command to selected server" disabled>Send Command</button>
                {% endif %}
            </div>
        </section> {# --- End Server Selection --- #}


        {# --- Content Sections (Toggled by Sidebar Links) --- #}

        {# Overview Section - Displays Server Cards #}
        <section id="overview-section" class="content-section active">
            <h2>Overview</h2>
            {# This div is now empty. JavaScript will populate it. #}
            <div class="server-card-list" id="server-card-list">
                <!-- Server cards will be dynamically inserted here -->
            </div>
            {# This message is now hidden by default. JS will show it if needed. #}
            <div class="no-servers-message" id="no-servers-message" style="display: none;">
                No servers found. Use 'Install New Server' in the navigation menu to get started.
            </div>
        </section> {# --- End Overview Section --- #}


        {# Manage Section - Update, Monitor, Delete #}
        <section id="manage-section" class="content-section">
            <h2>Manage Server</h2>
            <p>Select a server from the dropdown above, then use the buttons below.</p>
            <div class="section-actions server-dependent-actions">
                <h4>Actions for <span id="selected-server-manage" style="font-style: italic;">(No server selected)</span></h4>
                <div class="button-group">
                    {% if current_user.role == 'admin' %}
                    <button type="button" id="update-server-btn" class="action-button" title="Check for updates and install if available for the selected server" disabled>
                        Update Server
                    </button>
                    {% endif %}
                    <a href="#" id="config-link-monitor" class="action-button config-nav-link" disabled>
                        Monitor Usage
                    </a>
                    {% if current_user.role == 'admin' %}
                    <button type="button" id="delete-server-btn" class="action-button danger-button" title="Delete all data for the selected server" disabled>
                        Delete Server
                    </button>
                    {% endif %}
                </div>
            </div>
        </section> {# --- End Manage Section --- #}


        {# Configure Section - Links to specific config pages #}
        <section id="configure-section" class="content-section">
            <h2>Configure Server</h2>
            <p>Select a server from the dropdown above, then choose a configuration area:</p>
            <div class="section-actions server-dependent-actions">
                <h4>Configuration Areas for <span id="selected-server-config" style="font-style: italic;">(No server selected)</span></h4>
                <div class="button-group">
                    <a href="#" id="config-link-properties" class="action-link config-nav-link" disabled title="Edit server.properties">Properties</a>
                    <a href="#" id="config-link-allowlist" class="action-link config-nav-link" disabled title="Edit allowlist.json">Allowlist</a>
                    <a href="#" id="config-link-permissions" class="action-link config-nav-link" disabled title="Edit permissions.json">Permissions</a>
                    {% if current_user.role == 'admin' %}
                    <a href="#" id="config-link-service" class="action-link config-nav-link" disabled title="Configure autostart/autoupdate">Service Settings</a>
                    {% endif %}
                </div>
                {# REMOVED {% if not servers %} check #}
            </div>
        </section> {# --- End Configure Section --- #}


        {# Content Section - Links to import pages #}
        {% if current_user.role == 'admin' %}
        <section id="content-section" class="content-section">
            <h2>Content Management</h2>
            <p>Select a server from the dropdown above to import content:</p>
            <div class="section-actions server-dependent-actions">
                <h4>Import Options for <span id="selected-server-content" style="font-style: italic;">(No server selected)</span></h4>
                <div class="button-group">
                    <a href="#" id="content-link-world" class="action-link content-nav-link" disabled title="Import or Export a world to/from .mcworld">Manage World</a>
                    <a href="#" id="content-link-addon" class="action-link content-nav-link" disabled title="Install addons from .mcpack or .mcaddon">Manage Addon</a>
                </div>
            </div>
        </section> {# --- End Content Section --- #}
        {% endif %}


        {# Backup/Restore Section - Links to specific menus #}
        {% if current_user.role != 'user' %}
        <section id="backup-restore-section" class="content-section">
            <h2>Backup & Restore</h2>
            <p>Select a server from the dropdown above to manage backups:</p>
            <div class="section-actions server-dependent-actions">
                <h4>Backup/Restore for <span id="selected-server-backup" style="font-style: italic;">(No server selected)</span></h4>
                <div class="button-group">
                    <a href="#" id="backup-link-menu" class="action-link backup-nav-link" disabled>Backup Menu</a>
                    <a href="#" id="restore-link-menu" class="action-link restore-nav-link" disabled>Restore Menu</a>
                </div>
            </div>
        </section> {# --- End Backup/Restore Section --- #}
        {% endif %}

    </main> {# --- End Main Content Area --- #}

</div> {# --- End Page Layout --- #}

{% endblock %}


{# --- Body Scripts Block --- #}
{% block body_scripts %}
<script src="{{ request.url_for('static', path='js/dashboard.js') }}" defer></script>
{% endblock %}