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

{# --- Page Title Block --- #}
{% block title %}{{ super() }} - Configure Properties: {{ server_name }}{% endblock %}

{# --- Main Content Block --- #}
{% block content %}
<div id="install-config-page" data-server-name="{{ server_name }}" data-is-new-install="{{ new_install }}">
<h2>Configure Server Properties</h2>
<p style="margin-bottom: 15px;">
    Server: <strong>{{ server_name }}</strong>
    {% if new_install %}
    <br><span class="step-indicator">(Step 1 of 4 for New Installation)</span>
    {% endif %}
</p>

    {# --- Status & Validation Message Areas --- #}
<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>

    {# --- Loading Indicator --- #}
<div id="properties-loader" class="loader-container">
    <div class="spinner"></div>
    <p>Loading server properties...</p>
</div>

    {# --- Properties Configuration Section (Initially hidden) --- #}
<section id="properties-form-container" class="properties-config-section" style="display: none;">
    <div class="form-grid">

        {# Server Name (MOTD) #}
        <div class="form-group">
            <label for="server-name" class="form-label">Server Name (MOTD):</label>
            <input type="text" id="server-name" name="server-name" class="form-input" value="{{ server_name }}" required>
            <small class="form-help-text">Name displayed in the server list (in Minecraft).</small>
            <div class="validation-error" data-field="server-name"></div>
        </div>

        {# Level Name #}
        <div class="form-group">
            <label for="level-name" class="form-label">Level Name (World Folder):</label>
            <input type="text" id="level-name" name="level-name" class="form-input" value="Bedrock level" required>
            <small class="form-help-text">Folder name for the world data. Invalid characters/spaces will be replaced with underscores (_).</small>
            <div class="validation-error" data-field="level-name"></div>
        </div>

        {# Gamemode (Segmented Control) #}
        <div class="form-group">
            <label class="form-label">Default Gamemode:</label>
            <div class="segmented-control" data-input-id="gamemode-hidden">
                <button type="button" data-value="survival" class="segment active">Survival</button>
                <button type="button" data-value="creative" class="segment">Creative</button>
                <button type="button" data-value="adventure" class="segment">Adventure</button>
            </div>
            <input type="hidden" id="gamemode-hidden" name="gamemode" value="survival">
            <div class="validation-error" data-field="gamemode"></div>
        </div>

        {# Difficulty (Segmented Control) #}
        <div class="form-group">
            <label class="form-label">Difficulty:</label>
            <div class="segmented-control" data-input-id="difficulty-hidden">
                <button type="button" data-value="peaceful" class="segment">Peaceful</button>
                <button type="button" data-value="easy" class="segment active">Easy</button>
                <button type="button" data-value="normal" class="segment">Normal</button>
                <button type="button" data-value="hard" class="segment">Hard</button>
            </div>
            <input type="hidden" id="difficulty-hidden" name="difficulty" value="easy">
            <div class="validation-error" data-field="difficulty"></div>
        </div>

        {# Allow Cheats (Toggle Switch) #}
        <div class="form-group form-group-toggle-container">
            <div class="form-label-group">
                <label for="allow-cheats-cb" class="form-label">Allow Cheats:</label>
                <small class="form-help-text">Enables commands like /gamemode, /give.</small>
            </div>
            <div class="toggle-switch-container">
                <input type="checkbox" id="allow-cheats-cb" name="allow-cheats-cb" class="toggle-input" value="true">
                <label for="allow-cheats-cb" class="toggle-switch"></label>
            </div>
            <input type="hidden" name="allow-cheats" class="toggle-hidden-false" value="false">
            <div class="validation-error" data-field="allow-cheats" style="grid-column: 1 / -1;"></div>
        </div>

        {# Max Players #}
        <div class="form-group">
            <label for="max-players" class="form-label">Max Players:</label>
            <input type="number" id="max-players" name="max-players" class="form-input" value="10" min="1" step="1" required>
            <div class="validation-error" data-field="max-players"></div>
        </div>

        {# Level Seed #}
        <div class="form-group">
            <label for="level-seed" class="form-label">Level Seed:</label>
            <input type="text" id="level-seed" name="level-seed" class="form-input" value="">
            <small class="form-help-text">Leave empty for a random seed.</small>
            <div class="validation-error" data-field="level-seed"></div>
        </div>

        {# Server Port (IPv4) #}
        <div class="form-group">
            <label for="server-port" class="form-label">Server Port (IPv4):</label>
            <input type="number" id="server-port" name="server-port" class="form-input" value="19132" min="1" max="65535" step="1" required>
            <div class="validation-error" data-field="server-port"></div>
        </div>

        {# Server Port (IPv6) #}
        <div class="form-group">
            <label for="server-portv6" class="form-label">Server Port (IPv6):</label>
            <input type="number" id="server-portv6" name="server-portv6" class="form-input" value="19133" min="1" max="65535" step="1" required>
            <div class="validation-error" data-field="server-portv6"></div>
        </div>

        {# Enable Lan Visibility (Toggle Switch) #}
        <div class="form-group form-group-toggle-container">
            <div class="form-label-group">
                <label for="enable-lan-visibility-cb" class="form-label">Announce to LAN:</label>
                <small class="form-help-text">Makes server visible to others on the local network.</small>
            </div>
            <div class="toggle-switch-container">
                <input type="checkbox" id="enable-lan-visibility-cb" name="enable-lan-visibility-cb" class="toggle-input" value="true" checked>
                <label for="enable-lan-visibility-cb" class="toggle-switch"></label>
            </div>
            <input type="hidden" name="enable-lan-visibility" class="toggle-hidden-false" value="false">
            <div class="validation-error" data-field="enable-lan-visibility" style="grid-column: 1 / -1;"></div>
        </div>

        {# Other fields follow the same pattern - defaults are set statically #}
        <div class="form-group form-group-toggle-container">
            <div class="form-label-group">
                <label for="allow-list-cb" class="form-label">Enable Allow List:</label>
                <small class="form-help-text">If enabled, only players on the allowlist can join.</small>
            </div>
            <div class="toggle-switch-container">
                <input type="checkbox" id="allow-list-cb" name="allow-list-cb" class="toggle-input" value="true">
                <label for="allow-list-cb" class="toggle-switch"></label>
            </div>
            <input type="hidden" name="allow-list" class="toggle-hidden-false" value="false">
            <div class="validation-error" data-field="allow-list" style="grid-column: 1 / -1;"></div>
        </div>
        <div class="form-group">
            <label class="form-label">Default Player Permission:</label>
            <div class="segmented-control" data-input-id="default-player-permission-level-hidden">
                <button type="button" data-value="visitor" class="segment">Visitor</button>
                <button type="button" data-value="member" class="segment active">Member</button>
                <button type="button" data-value="operator" class="segment">Operator</button>
            </div>
            <input type="hidden" id="default-player-permission-level-hidden" name="default-player-permission-level" value="member">
            <div class="validation-error" data-field="default-player-permission-level"></div>
        </div>
        <div class="form-group">
            <label for="view-distance" class="form-label">View/Render Distance (Chunks):</label>
            <input type="number" id="view-distance" name="view-distance" class="form-input" value="10" min="5" step="1" required>
            <small class="form-help-text">How far the world generates around players (min 5).</small>
            <div class="validation-error" data-field="view-distance"></div>
        </div>
        <div class="form-group">
            <label for="tick-distance" class="form-label">Tick Distance (Chunks):</label>
            <input type="number" id="tick-distance" name="tick-distance" class="form-input" value="4" min="4" max="12" step="1" required>
            <small class="form-help-text">How far the world actively processes things (4-12).</small>
            <div class="validation-error" data-field="tick-distance"></div>
        </div>
        <div class="form-group form-group-toggle-container">
            <div class="form-label-group">
                <label for="online-mode-cb" class="form-label">Online Mode (Xbox Auth):</label>
                <small class="form-help-text">Requires players to be authenticated with Xbox Live.</small>
            </div>
            <div class="toggle-switch-container">
                <input type="checkbox" id="online-mode-cb" name="online-mode-cb" class="toggle-input" value="true" checked>
                <label for="online-mode-cb" class="toggle-switch"></label>
            </div>
            <input type="hidden" name="online-mode" class="toggle-hidden-false" value="false">
            <div class="validation-error" data-field="online-mode" style="grid-column: 1 / -1;"></div>
        </div>
        <div class="form-group form-group-toggle-container">
            <div class="form-label-group">
                <label for="texturepack-required-cb" class="form-label">Require Texture Pack:</label>
                <small class="form-help-text">Forces players to download & use server resource packs.</small>
            </div>
            <div class="toggle-switch-container">
                <input type="checkbox" id="texturepack-required-cb" name="texturepack-required-cb" class="toggle-input" value="true">
                <label for="texturepack-required-cb" class="toggle-switch"></label>
            </div>
            <input type="hidden" name="texturepack-required" class="toggle-hidden-false" value="false">
            <div class="validation-error" data-field="texturepack-required" style="grid-column: 1 / -1;"></div>
        </div>
    </div>

    <div class="form-actions">
        <button type="button"
                class="action-button start-button"
                id="submit-properties-btn">
            Save Properties
        </button>
        {% if new_install %}
        <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">
            Skip & Go to Allowlist »
        </a>
        {% else %}
        <a href="{{ request.url_for('index') if request else '/' }}" class="action-link">
            « Back to Dashboard
        </a>
        {% endif %}
    </div>
</section>
</div>
{% endblock %}