<div class="modal fade" id="createCalendarModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2" style="background:#6366f1;color:#fff">
                <h6 class="modal-title"><i class="bi bi-calendar3 me-2"></i>Calendar &amp; Events app</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-3">
                <p class="text-muted small mb-3">Add a full <strong>event-management calendar</strong> to your generated app — a standalone application (like Google Calendar) where users create events, schedule meetings, invite people, set reminders and share calendars with everyone, specific groups, or selected users. It <strong>provisions its own tables</strong> automatically — no business table required.</p>

                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="calAppEnabled" checked>
                    <label class="form-check-label fw-semibold" for="calAppEnabled">Enable the Calendar app in this project</label>
                </div>

                <div class="row g-2">
                    <div class="col-md-6">
                        <label class="form-label small mb-1">Default view</label>
                        <select class="form-select form-select-sm" id="calAppView">
                            <option value="month" selected>Month</option>
                            <option value="week">Week</option>
                            <option value="day">Day</option>
                            <option value="agenda">Agenda</option>
                            <option value="year">Year</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small mb-1">First day of week</label>
                        <select class="form-select form-select-sm" id="calAppFirstDay">
                            <option value="0" selected>Sunday</option>
                            <option value="1">Monday</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small mb-1">Menu label</label>
                        <input type="text" class="form-control form-control-sm" id="calAppMenuLabel" value="Calendar" placeholder="Calendar">
                    </div>
                </div>

                <hr class="my-3">

                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="calAppPersonal" checked>
                    <label class="form-check-label small" for="calAppPersonal">Allow users to create their own personal calendars
                        <i class="bi bi-info-circle text-muted" title="Each user gets a private 'My Calendar' and can create more; they choose what to share."></i></label>
                </div>
                <div class="form-check form-switch mt-1">
                    <input class="form-check-input" type="checkbox" id="calAppInApp" checked>
                    <label class="form-check-label small" for="calAppInApp">Send in-app notifications
                        <i class="bi bi-info-circle text-muted" title="Delivers event reminders to the in-app notification bell (uses your app's notifications table + the cron task)."></i></label>
                </div>
                <div class="form-check form-switch mt-1">
                    <input class="form-check-input" type="checkbox" id="calAppEmail">
                    <label class="form-check-label small" for="calAppEmail">Send email reminders
                        <i class="bi bi-info-circle text-muted" title="Uses your app's Email settings + the cron task to email reminders before events."></i></label>
                </div>

                <div id="calAppResult" class="mt-3"></div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnCreateCalendarSubmit" style="background:#6366f1;border-color:#6366f1"><i class="bi bi-calendar-check me-1"></i> Save &amp; enable</button>
            </div>
        </div>
    </div>
</div>
