PlanTempusApp/PlanTempus.Application/Features/Shared/_TodoDrawer.cshtml

<swp-todo-drawer id="todoDrawer">
    <swp-drawer-header>
        <swp-drawer-back id="todoDrawerBack">
            <i class="ph ph-caret-left"></i>
        </swp-drawer-back>
        <swp-drawer-title>Mine opgaver</swp-drawer-title>
        <swp-drawer-header-actions>
            <swp-btn class="primary small" id="addTodoBtn">
                <i class="ph ph-plus"></i>
                Ny opgave
            </swp-btn>
        </swp-drawer-header-actions>
    </swp-drawer-header>

    <swp-drawer-content>
        <!-- I dag -->
        <swp-todo-section>
            <swp-todo-section-header>
                <i class="ph ph-caret-down"></i>
                <swp-todo-section-title>I dag</swp-todo-section-title>
                <swp-todo-section-count>3</swp-todo-section-count>
            </swp-todo-section-header>
            <swp-todo-items>
                <swp-todo-item>
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Ring til leverandør om ordre</swp-todo-title>
                        <swp-todo-meta>
                            <swp-todo-time>
                                <i class="ph ph-clock"></i>
                                10:00
                            </swp-todo-time>
                        </swp-todo-meta>
                    </swp-todo-content>
                </swp-todo-item>
                <swp-todo-item data-completed="true">
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Bestil shampoo fra Wella</swp-todo-title>
                    </swp-todo-content>
                </swp-todo-item>
                <swp-todo-item>
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Opdater prisliste for 2025</swp-todo-title>
                        <swp-todo-meta>
                            <swp-todo-priority class="high">
                                <i class="ph ph-flag"></i>
                                Høj
                            </swp-todo-priority>
                        </swp-todo-meta>
                    </swp-todo-content>
                </swp-todo-item>
            </swp-todo-items>
        </swp-todo-section>

        <!-- Denne uge -->
        <swp-todo-section>
            <swp-todo-section-header>
                <i class="ph ph-caret-down"></i>
                <swp-todo-section-title>Denne uge</swp-todo-section-title>
                <swp-todo-section-count>2</swp-todo-section-count>
            </swp-todo-section-header>
            <swp-todo-items>
                <swp-todo-item>
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Rengør og vedligehold udstyr</swp-todo-title>
                        <swp-todo-meta>
                            <swp-todo-date>
                                <i class="ph ph-calendar"></i>
                                Onsdag
                            </swp-todo-date>
                        </swp-todo-meta>
                    </swp-todo-content>
                </swp-todo-item>
                <swp-todo-item>
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Medarbejdersamtale med Jonas</swp-todo-title>
                        <swp-todo-meta>
                            <swp-todo-date>
                                <i class="ph ph-calendar"></i>
                                Fredag
                            </swp-todo-date>
                            <swp-todo-time>
                                <i class="ph ph-clock"></i>
                                14:00
                            </swp-todo-time>
                        </swp-todo-meta>
                    </swp-todo-content>
                </swp-todo-item>
            </swp-todo-items>
        </swp-todo-section>

        <!-- Udført -->
        <swp-todo-section class="collapsed">
            <swp-todo-section-header>
                <i class="ph ph-caret-down"></i>
                <swp-todo-section-title>Udført</swp-todo-section-title>
                <swp-todo-section-count>3</swp-todo-section-count>
            </swp-todo-section-header>
            <swp-todo-items>
                <swp-todo-item data-completed="true">
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Send faktura til kunde</swp-todo-title>
                    </swp-todo-content>
                </swp-todo-item>
                <swp-todo-item data-completed="true">
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Opdater åbningstider på Google</swp-todo-title>
                    </swp-todo-content>
                </swp-todo-item>
                <swp-todo-item data-completed="true">
                    <swp-todo-checkbox>
                        <i class="ph ph-check"></i>
                    </swp-todo-checkbox>
                    <swp-todo-content>
                        <swp-todo-title>Bestil nye håndklæder</swp-todo-title>
                    </swp-todo-content>
                </swp-todo-item>
            </swp-todo-items>
        </swp-todo-section>
    </swp-drawer-content>
</swp-todo-drawer>