@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailGeneralViewModel

<swp-detail-grid>
    <!-- Left column -->
    <div>
        <!-- Contact Card -->
        <swp-card>
            <swp-section-label>@Model.LabelContact</swp-section-label>
            <swp-edit-section>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelFullName</swp-edit-label>
                    <input type="text" id="fullname" value="@Model.Name">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelEmail</swp-edit-label>
                    <input type="text" id="email" value="@Model.Email">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelPhone</swp-edit-label>
                    <input type="text" id="phone" value="@Model.Phone">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelAddress</swp-edit-label>
                    <input type="text" id="address" value="@Model.Address">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelPostalCity</swp-edit-label>
                    <input type="text" id="postalcity" value="@Model.PostalCity">
                </swp-edit-row>
            </swp-edit-section>
        </swp-card>

        <!-- Personal Card -->
        <swp-card>
            <swp-section-label>@Model.LabelPersonal</swp-section-label>
            <swp-edit-section>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelBirthDate</swp-edit-label>
                    <input type="text" id="birthdate" value="@Model.BirthDate">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelEmergencyContact</swp-edit-label>
                    <input type="text" id="emergencycontact" value="@Model.EmergencyContact">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelEmergencyPhone</swp-edit-label>
                    <input type="text" id="emergencyphone" value="@Model.EmergencyPhone">
                </swp-edit-row>
            </swp-edit-section>
        </swp-card>
    </div>

    <!-- Right column -->
    <div>
        <!-- Employment Card -->
        <swp-card>
            <swp-section-label>@Model.LabelEmployment</swp-section-label>
            <swp-edit-section>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelEmploymentDate</swp-edit-label>
                    <input type="text" id="employmentdate" value="@Model.EmploymentDate">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelPosition</swp-edit-label>
                    <input type="text" id="position" value="@Model.Position">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelEmploymentType</swp-edit-label>
                    <input type="text" id="employmenttype" value="@Model.EmploymentType">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelHoursPerWeek</swp-edit-label>
                    <input type="text" id="hoursperweek" value="@Model.HoursPerWeek">
                </swp-edit-row>
            </swp-edit-section>
        </swp-card>

        <!-- Settings Card -->
        <swp-card>
            <swp-section-label>@Model.LabelSettings</swp-section-label>
            <swp-toggle-row>
                <div>
                    <swp-toggle-label>@Model.SettingShowInBooking</swp-toggle-label>
                    <swp-toggle-description>@Model.SettingShowInBookingDesc</swp-toggle-description>
                </div>
                <swp-toggle-slider data-value="yes">
                    <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                    <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                </swp-toggle-slider>
            </swp-toggle-row>
            <swp-toggle-row>
                <div>
                    <swp-toggle-label>@Model.SettingSmsReminders</swp-toggle-label>
                    <swp-toggle-description>@Model.SettingSmsRemindersDesc</swp-toggle-description>
                </div>
                <swp-toggle-slider data-value="yes">
                    <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                    <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                </swp-toggle-slider>
            </swp-toggle-row>
            <swp-toggle-row>
                <div>
                    <swp-toggle-label>@Model.SettingEditCalendar</swp-toggle-label>
                    <swp-toggle-description>@Model.SettingEditCalendarDesc</swp-toggle-description>
                </div>
                <swp-toggle-slider data-value="yes">
                    <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                    <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                </swp-toggle-slider>
            </swp-toggle-row>
        </swp-card>

        <!-- Notifications Card -->
        <swp-card>
            <swp-section-label>@Model.LabelNotifications</swp-section-label>
            <swp-notification-intro>@Model.NotificationsIntro</swp-notification-intro>
            <swp-checkbox-list>
                <swp-checkbox-row class="checked">
                    <swp-checkbox-box>
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </swp-checkbox-box>
                    <swp-checkbox-text>@Model.NotifOnlineBooking</swp-checkbox-text>
                </swp-checkbox-row>
                <swp-checkbox-row class="checked">
                    <swp-checkbox-box>
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </swp-checkbox-box>
                    <swp-checkbox-text>@Model.NotifManualBooking</swp-checkbox-text>
                </swp-checkbox-row>
                <swp-checkbox-row>
                    <swp-checkbox-box>
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </swp-checkbox-box>
                    <swp-checkbox-text>@Model.NotifCancellation</swp-checkbox-text>
                </swp-checkbox-row>
                <swp-checkbox-row>
                    <swp-checkbox-box>
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </swp-checkbox-box>
                    <swp-checkbox-text>@Model.NotifWaitlist</swp-checkbox-text>
                </swp-checkbox-row>
                <swp-checkbox-row class="checked">
                    <swp-checkbox-box>
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </swp-checkbox-box>
                    <swp-checkbox-text>@Model.NotifDailySummary</swp-checkbox-text>
                </swp-checkbox-row>
            </swp-checkbox-list>
        </swp-card>
    </div>
</swp-detail-grid>
