<form onsubmit="event.preventDefault();">
    <div align = "left"><h2>{{localize 'fate-core-official.EditingTracks'}} 
        {{#if (eq this.category "Combat")}}
            {{localize 'fate-core-official.Combat'}}
        {{else}}
            {{#if (eq this.category "Other")}}
                {{localize 'fate-core-official.Other'}}
            {{else}}
                {{this.category}} 
            {{/if}}
        {{/if}}
        {{localize 'fate-core-official.category'}}
    </h2></div>
    <div><select id="track_select" style="background: white; color: black; font-family: var(--fco-font-family); width: 300px; height: 25px">
        <option>{{localize 'fate-core-official.NewTrack'}}</option>
        {{#each tracks}}
            <option>{{this.name}}</option>
        {{/each}}
    </select><button type="button" id="copy" style="width:25px; height:25px" i icon class = "fas fa-copy"></button>
             <button type="button" id="exportTrack" style="width:25px; height:25px" i icon class = "fas fa-file-export"></button>   
            </div>
    <table style="width:1000px" cellspacing ="4" cellpadding="4">
        <tr>
            <td width="100">
                {{localize 'fate-core-official.Name'}}:
            </td>
            <td>
                <input type="text" id ="edit_track_name" style="background: white; color: black; font-family: var(--fco-font-family);"></input>
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Description'}}:
            </td>
            <td>
                <div id ="edit_track_description_rich" tabindex = "0" style="min-height:1.5em; background: white; color: black; font-family: var(--fco-font-family);"></div>
                <div id ="edit_track_description" style="display:none; background: white; color: black; font-family: var(--fco-font-family);"></div>
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Universal'}}<p/><p/>
            <td>
                <input type="checkbox" id="edit_track_universal" checked></input>{{localize 'fate-core-official.TrueIfFromSkillRating'}}<br/>
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Unique'}}
            </td>
            <td>
                <input type="checkbox" id="edit_track_unique" checked></input>{{localize 'fate-core-official.TrueIfOnlyOneCopy'}} 
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Paid'}}
            </td>
            <td>
                <input type="checkbox" id="edit_track_paid"></input>{{localize 'fate-core-official.TrueIfCostsOneRefresh'}} 
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.RecoveryType'}}
            </td>
            <td>
                <select id="edit_track_recovery_type" style="background: white; color: black; font-family: var(--fco-font-family); width: 300px; height: 25px">
                    <option value ="Fleeting">{{localize 'fate-core-official.Fleeting'}}</option>
                    <option value ="Sticky">{{localize 'fate-core-official.Sticky'}}</option>
                    <option value ="Lasting">{{localize 'fate-core-official.Lasting'}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Aspect'}}:
            </td>
            <td>
                <select id="edit_track_aspect" style="background: white; color: black; font-family: var(--fco-font-family); width: 300px; height: 25px">
                    <option value="no">{{localize 'fate-core-official.No'}}</option>
                    <option value="as_name">{{localize 'fate-core-official.NameAsAspect'}}</option>
                    <option value = "when_marked">{{localize 'fate-core-official.DefinedWhenMarked'}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.WhenMarked'}}
            </td>
            <td>
                <div id ="edit_track_when_marked_rich" tabindex = "0" style="min-height:1.5em; min-width:100%; background: white; color: black; font-family: var(--fco-font-family);"></div>
                <div id ="edit_track_when_marked" style="display:none; background: white; color: black; font-family: var(--fco-font-family);"></div>
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.HowRecover'}}
            </td>
            <td>
                <div id ="edit_track_when_recovers_rich" tabindex = "0" style="min-height:1.5em; min-width:100%; background: white; color: black; font-family: var(--fco-font-family);"></div>
                <div id ="edit_track_when_recovers" style="display:none; background: white; color: black; font-family: var(--fco-font-family);"></div>
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Boxes'}}
            </td>
            <td>
                <input type="number" id="edit_track_boxes" value="0" style="background: white; color: black; font-family: var(--fco-font-family); width: 300px; height: 25px"> 
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.BoxLabels'}}:
            </td>
            <td>
                <select id="track_label_select" style="color:black; background:white;" >
                    <option value="escalating">
                        {{localize 'fate-core-official.Escalating'}}
                    </option>
                    <option value="custom">
                        {{localize 'fate-core-official.Custom'}}
                    </option>
                    <option selected="selected" value="none">
                        {{localize 'fate-core-official.None'}}
                    </option>
                </select>
                <input type="text" id="track_custom_label" maxlength="1" minlength="1" title="{{localize 'fate-core-official.EnterASingleCharacter'}}" hidden="true" style="color:black; background:white; width:50px" value="{{this.label}}"/> {{localize 'fate-core-official.LabelOverrides'}}
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Harm'}}:
            </td>
            <td>
                <input type="number" id="edit_track_harm" value="0" style="background: white; color: black; font-family: var(--fco-font-family); width: 300px; height: 25px"> {{localize 'fate-core-official.HowMuchHarm'}}
            </td>
        </tr>
        <tr>
            <td>
                {{localize 'fate-core-official.Rollable'}}
            </td>
            <td>
                <select id = "edit_track_rollable" style="background: white; color: black; font-family: var(--fco-font-family); width: 300px; height: 25px">
                    <option value="false" selected="selected">False</option>
                    <option value="full">{{localize 'fate-core-official.RollFullBoxes'}}</option>
                    <option value="empty">{{localize 'fate-core-official.RollEmptyBoxes'}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="button" id="save_track" style="width:200px; height:50px">{{localize 'fate-core-official.Save'}}</button><button type="button" id="edit_linked_skills" style="width:200px; height:50px" disabled>{{localize 'fate-core-official.EditLinkedSkills'}}</button><button type="button" style ="width:30px; height:30px" id="delete_track" i icon class="fas fa-trash"></button>
            </td>
        </tr>
    </table>
</form>