<div id="tabs-scenario">

<div class="left">

    <fieldset name="scenario" class="tl" style="display:none;"> <legend>S<u>c</u>enario</legend>
        <div id="panel-scenario">
            <div class="row">
                <label for="SCENARIO_NAME">Name:</label>
                <input name="SCENARIO_NAME" type="text" class="param">
                <input name="SCENARIO_ID" type="text" class="param" title="Scenario ID">
                <button class="scenario-search" title="Search for scenarios"></button>
            </div>
            <div class="row">
                <label for="SCENARIO_LOCATION">Location:</label>
                <input name="SCENARIO_LOCATION" type="text" class="param">
                <select name="SCENARIO_THEATER" class="param" title="Scenario theater"> </select>
            </div>
            <div class="row">
                <label for="SCENARIO_DATE">Date:</label>
                <input name="SCENARIO_DATE" type="text" size="10" class="param">
                <span class="spacer"></span>
                <span class="small">
                    Width: <input type="text" class="param" name="SCENARIO_WIDTH" size="5">
                    <button class="generate" data-id="scenario">Snippet</button>
                </span>
            </div>
            <div class="row" style="margin-top:0.2em;">
                <label for="TURN_TRACK_NTURNS">Turns:</label>
                <select name="TURN_TRACK_NTURNS" class="param"></select>
                <div class="turn-track-controls small" style="display:none;align-items:center;">
                    <button id="turn-track-settings" title="Turn track settings"><img src="{{url_for('static',filename='images/menu/settings.png')}}"></button>
                    <button class="generate" data-id="turn_track">Snippet</button>
                </div>
            </div>
            <div class="small" style="display:none;">
                Width: <input type="text" name="TURN_TRACK_WIDTH" class="param" size="1">
                <input type="checkbox" name="TURN_TRACK_VERTICAL" class="param"> Vertical </input> &nbsp;
                R<sub>1</sub>: <input type="text" name="TURN_TRACK_REINFORCEMENTS_1" class="param" size=8">
                R<sub>2</sub>: <input type="text" name="TURN_TRACK_REINFORCEMENTS_2" class="param" size=8">
                <input type="checkbox" name="TURN_TRACK_SWAP_PLAYERS" class="param"> Swap players </input>
            </div>
            <div class="row" style="margin-top:-0.6em;">
                <label></label>
                <span style='width:14em;'></span>
                <label class="header" for="ELR">ELR</label>
                <span style='width:0.1em'></span>
                <label class="header" for="SAN">SAN</label>
            </div>
            <div class="row">
                <label for="PLAYER_1"><u>P</u>layer 1:</label>
                <select name="PLAYER_1" class="param"></select>
                <select name="PLAYER_1_ELR" class="param"></select>
                <select name="PLAYER_1_SAN" class="param"></select>
                <button class="generate" data-id="nat_caps_1" style="margin-left:8px;"></button>
            </div>
            <div class="row">
                <input name="PLAYER_1_DESCRIPTION" type="text" class="param" title="Description of the player's OB.">
            </div>
            <div class="row">
                <label for="PLAYER_2">Player 2:</label>
                <select name="PLAYER_2" class="param"></select>
                <select name="PLAYER_2_ELR" class="param"></select>
                <select name="PLAYER_2_SAN" class="param"></select>
                <button class="generate" data-id="nat_caps_2" style="margin-left:8px;"></button>
            </div>
            <div class="row">
                <input name="PLAYER_2_DESCRIPTION" type="text" class="param" title="Description of the player's OB.">
            </div>
            <div class="row">
                <input name="ASA_ID" type="text" size="1" class="param" style="display:none;">
                <input name="ROAR_ID" type="text" size="1" class="param" style="display:none;">
                <span class="spacer"></span>
                <span class="small">
                    Width:
                    <input type="text" class="param" name="PLAYERS_WIDTH" size="5">
                    <button class="generate" data-id="players">Snippet</button>
                </span>
            </div>
        </div>
    </fieldset>

    <fieldset name="scenario_notes" class="bl" style="display:none;"> <legend>Notes</legend>
        <div id="panel-scenario_notes">
            <div class="content">
                <div id="scenario_notes-hint" class="sortable-hint"></div>
                <ul id="scenario_notes-sortable" class="sortable" style="display:none;"></ul>
            </div>
            <div class="footer">
                <button id="scenario_notes-add" class="sortable-add"></button>
                <img id="scenario_notes-trash" class="sortable-trash">
                <span class="spacer"></span>
                <button class="edit-template" data-id="scenario_note"></button>
            </div>
        </div>
    </fieldset>

</div>

<div class="right">

    <fieldset name="vc" class="tr" style="display:none;"> <legend>Victor<u>y</u> Conditions</legend>
        <div id="panel-vc">
            <textarea name="VICTORY_CONDITIONS" type="text" class="param"></textarea>
            <div class="footer">
                <span class="spacer"></span>
                <span class="small">
                    <label for="VICTORY_CONDITIONS_WIDTH">Width:</label>
                    <input type="text" class="param" name="VICTORY_CONDITIONS_WIDTH" size="5">
                    <button class="generate" data-id="victory_conditions">Snippet</button>
                </span>
            </div>
        </div>
    </fieldset>

    <fieldset name="ssr" class="br" style="display:none;"> <legend>SSR's</legend>
        <div id="panel-ssr">
            <div class="content">
                <div id="ssr-hint" class="sortable-hint"></div>
                <ul id="ssr-sortable" class="sortable" style="display:none;"></ul>
            </div>
            <div class="footer">
                <button id="ssr-add" class="sortable-add"></button>
                <img id="ssr-trash" class="sortable-trash">
                <span class="spacer"></span>
                <span class="small">
                    <label for="SSR_WIDTH">Width:</label>
                    <input type="text" class="param" name="SSR_WIDTH" size="5">
                    <button class="generate" data-id="ssr">Snippet</button>
                </span>
            </div>
        </div>
    </fieldset>

</div>

</div> <!-- tabs-scenario -->
