<form onsubmit="event.preventDefault();">
    <table style="width:auto" cellspacing ="4" cellpadding="4">
        <tr>
            <td>
                <div style="display: flex; align-items: center; justify-content: space-around;">
                    <input type="text" style="flex-grow: 0; flex-basis: 75%;" id="skillsLabel" class="approach_box" value="{{this.skills_label}}" disabled>
                    <span id="skillsLabelEdit" data-edit-element="skillsLabel" style="flex-grow: 0; flex-basis: 10%" aria-label="Edit skills label." class="fas fa-edit"></span>
                </div>
            </td>
            <td>
                <select id="skillListBox" size = "25" style="background: white; color: black; font-family: var(--fco-font-family); width: 150px; height: 250px">
                    {{#each skills}}
                        <option style="background:white; color:black; font-family: var(--fco-font-family);">
                            {{this.name}}
                        </option>>
                    {{/each}}
                </select>
            </td>
            <td>
                <button buttontype="button" id="editSkill">{{localize 'fate-core-official.Edit'}}</button><p></p>
                <button buttontype="button" id="deleteSkill">{{localize 'fate-core-official.Delete'}}</button><p></p>
                <button buttontype="button" id="copySkill">{{localize 'fate-core-official.Copy'}}</button><p></p>
                <button buttontype="button" id="exportSkill">{{localize 'fate-core-official.Export'}}</button>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <button type="button" id="addSkill">{{localize 'fate-core-official.AddNewSkill'}}</button>
                <button type="button" id="importSkills">{{localize 'fate-core-official.ImportSkill'}}</button>
                <button type="button" id="exportSkills">{{localize 'fate-core-official.ExportAllSkills'}}</button>
            </td>
        </tr>
    </table>
</form>