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

{# --- Page Title Block --- #}
{% block title %}{{ super() }} - Select Backup to Restore: {{ server_name }}{% endblock %}

{# --- Main Content Block --- #}
{% block content %}
    {# Main heading for the page #}
<h2>Select Backup to Restore</h2>

    {# Display context: Server Name and Restore Type #}
<p style="margin-bottom: 5px;">Server: <strong>{{ server_name }}</strong></p>
<p style="margin-bottom: 15px;">Restore Type: <strong>{{ restore_type | title }}</strong></p> {# Capitalize restore type #}

    {# --- Status Message Area --- #}
    {# Targeted by JavaScript (showStatusMessage) #}
<div id="status-message-area" class="message-box" style="opacity: 0; transition: opacity 0.5s ease-out;">
    <!-- Status messages from restore actions will appear here -->
</div>

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

    {# Section containing the backup selection list #}
<section id="backup-restore-page" data-server-name="{{ server_name | e }}">
<section class="restore-select-section list-section">
    {# Use list-section for potential common styling #}

    {# Check if the backups list (passed from the route) is not empty #}
    {% if backups %}
    <p>Select one of the available backups below to restore. <strong>Warning:</strong> This will overwrite current data.</p>

    {# Wrap table for responsiveness #}
    <div class="table-responsive-wrapper">
        <table class="server-table">
            {# Use standard table styling #}
            <thead>
                <tr>
                    <th scope="col">Backup File</th>
                    <th scope="col" style="width: 180px; text-align: center;">Action</th> {# Fixed width for action #}
                </tr>
            </thead>
            <tbody>
                {# Loop through the list of backup file paths #}
                {% for backup_path in backups %}
                <tr>
                    {# Display only the filename part using the basename filter #}
                    {# IMPORTANT: Assumes 'basename' filter is registered in Flask Jinja env #}
                    <td data-label="Backup File">{{ backup_path.name }}</td>
                    {# Center the button in the actions cell #}
                    <td data-label="Action" style="text-align: center;">
                        <button type='button'
                                class='action-button restore-button restore-backup-btn'
                                data-server-name='{{ server_name | e }}'
                                data-restore-type='{{ restore_type | e }}'
                                data-backup-path='{{ backup_path.path | e }}'>
                            Restore This Backup
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div> {# --- End .table-responsive-wrapper --- #}
    {% else %}
    {# Message displayed if the backups list is empty #}
    {# Use consistent styling with .no-servers-message or similar #}
    <p class="no-servers-message">
        {# Or use the table row version if preferred #}
        No backups found for server '{{ server_name }}' of type '{{ restore_type }}'.
    </p>
    {% endif %}

    {# --- Navigation Link Back --- #}
    <div class="navigation-link" style="margin-top: 25px;">
        {# Link back to the main restore menu for this server #}
        <a href="{{ request.url_for('restore_menu_page', server_name=server_name) if request else '#' }}" class="action-link">
            « Back to Restore Options
        </a>
    </div>

</section> {# --- End .restore-select-section --- #}
</section>
{% endblock %}