<swp-new-todo-drawer id="newTodoDrawer">
    <swp-drawer-header>
        <swp-drawer-back id="newTodoDrawerBack">
            <i class="ph ph-caret-left"></i>
        </swp-drawer-back>
        <swp-drawer-title>Ny opgave</swp-drawer-title>
    </swp-drawer-header>

    <swp-drawer-content>
        <!-- Titel -->
        <swp-form-field>
            <swp-section-label>Opgave</swp-section-label>
            <input type="text" placeholder="Hvad skal du huske?" id="newTodoTitle">
        </swp-form-field>

        <!-- Dato & Tid -->
        <swp-form-row>
            <swp-form-field>
                <swp-section-label>Dato</swp-section-label>
                <input type="date" id="newTodoDate">
            </swp-form-field>
            <swp-form-field>
                <swp-section-label>Tid</swp-section-label>
                <input type="time" id="newTodoTime">
            </swp-form-field>
        </swp-form-row>

        <!-- Prioritet -->
        <swp-form-field>
            <swp-section-label>Prioritet</swp-section-label>
            <select id="newTodoPriority">
                <option value="normal">Normal</option>
                <option value="high">Høj prioritet</option>
                <option value="low">Lav prioritet</option>
            </select>
        </swp-form-field>

        <!-- Synlighed -->
        <swp-form-field>
            <swp-section-label>Synlighed</swp-section-label>
            <swp-visibility-toggle>
                <swp-visibility-option class="active" data-value="personal">
                    <i class="ph ph-user"></i>
                    Kun mig
                </swp-visibility-option>
                <swp-visibility-option data-value="shared">
                    <i class="ph ph-users"></i>
                    Alle
                </swp-visibility-option>
            </swp-visibility-toggle>
        </swp-form-field>

        <!-- Noter -->
        <swp-form-field>
            <swp-section-label>Noter</swp-section-label>
            <textarea placeholder="Tilføj noter..." id="newTodoNotes"></textarea>
        </swp-form-field>
    </swp-drawer-content>

    <swp-drawer-footer>
        <swp-btn class="secondary" id="cancelNewTodo">Annuller</swp-btn>
        <swp-btn class="primary" id="saveNewTodo">Gem opgave</swp-btn>
    </swp-drawer-footer>
</swp-new-todo-drawer>
