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

{# --- Page Title Block --- #}
{# Sets the browser window/tab title, includes server name #}
{% block title %}{{ super() }} - Backup Config File: {{ server_name }}{% endblock %}

{# --- Head Scripts Block --- #}
{# Includes JavaScript files needed specifically for this page in the
<head>
    #}
    {% block head_scripts %}
    {# Utility functions (showStatusMessage, sendServerActionRequest) #}
    {# Backup/Restore specific frontend functions #}
    {% endblock %}


    {# --- Main Content Block --- #}
    {# Overrides the content block in base.html #}
    {% block content %}

    {# Hidden div to trigger JS initialization and pass server_name #}
    <div id="backup-restore-page" data-server-name="{{ server_name }}" style="display: none;"></div>

    {# Main heading for the page #}
    <h2>Select Configuration File to Backup</h2>

    {# Display the server context #}
    <p>Server: <strong>{{ server_name }}</strong></p>

    {# --- Status Message Area --- #}
    {# This div is targeted by the showStatusMessage() JavaScript function #}
    {# to display success, error, or info messages dynamically. #}
    <div id="status-message-area" class="message-box" style="opacity: 0; transition: opacity 0.5s ease-out;">
        {# Initial content is empty, controlled by JS #}
    </div>

    {# Section containing the backup options #}
    <section class="backup-config-section">
        <p>Click a button below to create a timestamped backup of the corresponding configuration file.</p>

        {# Group for the action buttons #}
        <div class="button-group action-buttons-group">
            <button type="button" id="backup-allowlist-btn" class="action-button">
                Backup allowlist.json
            </button>
            <button type="button" id="backup-permissions-btn" class="action-button">
                Backup permissions.json
            </button>
            <button type="button" id="backup-properties-btn" class="action-button">
                Backup server.properties
            </button>
        </div>

        <div class="navigation-link" style="margin-top: 30px;">
            <a href="{{ request.url_for('backup_menu_page', server_name=server_name) if request else '#' }}" class="action-link">
                « Back to Backup Menu
            </a>
        </div>
    </section>

    {% endblock %}
