## competitor: Optional[CompetitorType]
## clubs: List[ClubType]


<!-- Modal content -->
<div class="modal-content">
    <span class="close" onclick="document.getElementById('comp.addDialog').style.display='none'">&times;</span>
    <form id="comp.formAdd" class="form-container" autocomplete="off" onsubmit="comp_submitAdd(); return false;">
        <input id="comp.addId" name="id" type="text" value="${competitor.id if competitor else None}" hidden/>
        <table id="comp.addFormTable">
            <tr>
                <th class="input-header"><label for="com_firstName">First name *</label></th>
                <td><input id="com_firstName" name="first_name" type="text" value="${competitor.first_name if competitor else ''}" required oninput="mark_label(this)"/></td>
            </tr>
            <tr>
                <th class="input-header"><label for="com_lastName">Last name *</label></th>
                <td><input id="com_lastName" name="last_name" type="text" value="${competitor.last_name if competitor else ''}" required oninput="mark_label(this)"/></td>
            </tr>
            <tr>
                <th class="input-header"><label for="com_sex">Sex</label></th>
                <td>
                    <select id="com_sex" name="sex" oninput="mark_label(this)">
                    % for value in ["", "F", "M"]:
                        % if value == (competitor.sex.value if competitor and competitor.sex is not None else ""):
                            <option value="${value}" selected>${value}</option>
                        % else:
                            <option value="${value}">${value}</option>
                        % endif
                    % endfor
                    </select>
                </td>
            </tr>
            <tr>
                <th class="input-header"><label for="com_year">Year</label></th>
                <td><input id="com_year" name="year" type="number" min="1900" max="2099"
                           value="${competitor.year if competitor else None}" oninput="mark_label(this)"/></td>
            </tr>
            <tr>
                <th class="input-header"><label for="com_chip">Chip</label></th>
                <td><input id="com_chip" name="chip" type="text" value="${competitor.chip if competitor else ''}" oninput="mark_label(this)"/></td>
            </tr>
            <tr>
                <th class="input-header"><label for="com_clubId">Club</label></th>
                <td>
                    <select id="com_clubId" name="club_id" oninput="mark_label(this)">
                    % if competitor is None or competitor.club_id is None:
                        <option value="" selected></option>
                    % else:
                        <option value=""></option>
                    % endif
                    % for club in clubs:
                        % if competitor and competitor.club_id == club.id:
                            <option value="${club.id}" selected>${club.name}</option>
                        % else:
                            <option value="${club.id}">${club.name}</option>
                        % endif
                    % endfor
                    </select>
                </td>
            </tr>
        </table>
        <p></p>
        <button type="submit" class="btn">Save</button>
        <button type="button" class="btn cancel" onclick="document.getElementById('comp.addDialog').style.display='none'">Cancel</button>
    </form>
</div>