mc-webui/app/templates/contacts_base.html

<!DOCTYPE html>
<html lang="{{ lang }}" data-theme="light" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>{% block title %}{{ t('contacts.title') }} - mc-webui{% endblock %}</title>

    <!-- Theme: apply saved preference before CSS loads to prevent flash -->
    <script>
        (function() {
            var theme = localStorage.getItem('mc-webui-theme') || 'light';
            document.documentElement.setAttribute('data-theme', theme);
            document.documentElement.setAttribute('data-bs-theme', theme);
        })();
    </script>

    {% include "_head_i18n.html" %}

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin="" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <!-- Theme CSS (light/dark mode) -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">

    <style>
        /* Contact Management page layout overrides */
        .protection-indicator {
            font-size: 0.85rem;
        }

        .btn-outline-danger:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Clickable type filter badges */
        .type-filter-badge {
            display: inline-block;
            padding: 0.25rem 0.6rem;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
            user-select: none;
        }

        .type-filter-badge[data-type="COM"] {
            color: #0d6efd;
            background-color: var(--map-badge-inactive-bg);
            border: 2px solid #0d6efd;
        }
        .type-filter-badge[data-type="COM"].active {
            color: white;
            background-color: #0d6efd;
        }

        .type-filter-badge[data-type="REP"] {
            color: #198754;
            background-color: var(--map-badge-inactive-bg);
            border: 2px solid #198754;
        }
        .type-filter-badge[data-type="REP"].active {
            color: white;
            background-color: #198754;
        }

        .type-filter-badge[data-type="ROOM"] {
            color: #0dcaf0;
            background-color: var(--map-badge-inactive-bg);
            border: 2px solid #0dcaf0;
        }
        .type-filter-badge[data-type="ROOM"].active {
            color: white;
            background-color: #0dcaf0;
        }

        .type-filter-badge[data-type="SENS"] {
            color: #ffc107;
            background-color: var(--map-badge-inactive-bg);
            border: 2px solid #ffc107;
        }
        .type-filter-badge[data-type="SENS"].active {
            color: #212529;
            background-color: #ffc107;
        }

        /* Scrollable contacts lists - use flexbox to fill remaining space */
        #pendingList,
        #existingList {
            flex: 1 1 0;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        /* Full-screen lists for dedicated pages */
        .contacts-list-fullscreen {
            flex: 1 1 0;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 0;
        }

        /* Navigation cards on manage page */
        .nav-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 1.25rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: box-shadow 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-card:hover {
            box-shadow: var(--card-shadow-hover);
        }

        .nav-card h6 {
            margin: 0;
            font-weight: 600;
        }

        /* Sort toolbar */
        .filter-sort-toolbar {
            display: flex;
            flex-wrap: wrap;  /* 16px selects on touch (iOS zoom guard) overflow one row */
            gap: 0.375rem;
            margin-bottom: 1rem;
            align-items: center;
        }

        .filter-sort-toolbar .form-select {
            width: auto;
            padding: 0.35rem 2rem 0.35rem 0.5rem;
            font-size: 0.85rem;
        }

        /* Back buttons */
        .back-buttons {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .back-buttons button {
            flex: 1;
            padding: 0.75rem;
            min-height: 44px;
        }

        /* Cleanup section on manage page */
        .cleanup-section {
            background-color: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        [data-theme="dark"] .cleanup-section {
            background-color: rgba(255, 193, 7, 0.1);
            border-color: rgba(255, 193, 7, 0.3);
        }

        .cleanup-section h6 {
            color: #856404;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        [data-theme="dark"] .cleanup-section h6 {
            color: #ffc107;
        }

        /* Override global overflow: hidden from style.css for Contact Management pages */
        html, body {
            overflow: auto !important;
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
            background-color: var(--bg-body);
            color: var(--text-primary);
        }

        main {
            overflow: auto !important;
            flex: 1 1 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        main > .container-fluid,
        main > .container-fluid > .row,
        main > .container-fluid > .row > .col-12 {
            flex: 1 1 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        #pendingPageContent,
        #existingPageContent {
            flex: 1 1 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
    </style>

    {% block extra_head %}{% endblock %}
</head>
<body>
    <!-- Main Content -->
    <main>
        <div class="container-fluid p-0">
            <div class="row g-0">
                <div class="col-12">
                    {% block page_content %}
                    <!-- Content will be provided by child templates -->
                    {% endblock %}
                </div>
            </div>
        </div>
    </main>

    <!-- Delete Confirmation Modal (shared across all contact pages) -->
    <div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteContactModalLabel">
                        <i class="bi bi-exclamation-triangle"></i> {{ t('contacts.delete.title') }}
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{{ t('common.close') }}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">{{ t('contacts.delete.question') }}</p>
                    <div class="alert alert-warning mb-0">
                        <strong id="deleteContactName"></strong><br>
                        <small class="font-monospace" id="deleteContactKey"></small>
                    </div>
                    <p class="text-muted small mt-2 mb-0">{{ t('common.cannot_undo') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('common.cancel') }}</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                        <i class="bi bi-trash"></i> {{ t('contacts.delete.confirm') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast container for notifications (shared across all contact pages; position via JS from ui_settings) -->
    <div class="toast-container position-fixed top-0 start-0 p-3" data-toast-container>
        <div id="contactToast" class="toast" role="alert">
            <div class="toast-header">
                <strong class="me-auto">{{ t('contacts.title') }}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body"></div>
        </div>
    </div>

    <!-- Map Modal (Leaflet) -->
    <div class="modal fade" id="mapModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-geo-alt"></i> <span id="mapModalTitle">{{ t('contacts.map.title') }}</span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <!-- Type filter (hidden for single contact view) -->
                    <div id="mapTypeFilter" class="d-none px-3 py-2 border-bottom bg-light">
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <span class="small text-muted me-1">{{ t('contacts.map.show') }}</span>
                            <span class="map-filter-badge active" data-type="1" id="mapFilterCOM">COM</span>
                            <span class="map-filter-badge active" data-type="2" id="mapFilterREP">REP</span>
                            <span class="map-filter-badge active" data-type="3" id="mapFilterROOM">ROOM</span>
                            <span class="map-filter-badge active" data-type="4" id="mapFilterSENS">SENS</span>
                        </div>
                    </div>
                    <div id="leafletMap" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>

    <!-- Coordinate validation shared by every map (must load after Leaflet) -->
    <script src="{{ url_for('static', filename='js/geo-utils.js') }}"></script>

    <!-- Contact Management JavaScript -->
    <script src="{{ url_for('static', filename='js/contacts.js') }}"></script>

    {% block extra_scripts %}{% endblock %}
</body>
</html>