{% extends "base.html" %}
{% from "components.html" import data_table %}

{% block title %}Dashcam - Yaris OBD{% endblock %}

{% block content %}
<h3 class="text-dark mb-3 fw-bold">Dashcam</h3>

{# ── Device status bar ───────────────────────────────────────────────── #}
<div class="card shadow-sm mb-3">
    <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
        <i class="fas fa-usb text-muted"></i>
        <span id="dash-device-status" class="me-auto small">Checking for a USB dashcam…</span>
        <button id="dash-scan-btn" class="btn btn-sm btn-secondary" type="button">
            <i class="fas fa-search me-1"></i>Scan
        </button>
        <button id="dash-import-btn" class="btn btn-sm btn-primary" type="button" disabled>
            <i class="fas fa-download me-1"></i>Import all
        </button>
    </div>
    <div id="dash-import-status-bar" class="card-footer py-2 align-items-center gap-2" style="display:none;">
        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
        <span id="dash-import-status" class="small text-muted flex-grow-1">Importing…</span>
        <span id="dash-import-eta" class="small text-muted text-nowrap"></span>
    </div>
    <div id="dash-import-result-bar" class="card-footer py-2 small text-muted" style="display:none;">
        <span id="dash-import-result"></span>
    </div>
</div>

{# ── Files on dashcam (collapsible) ─────────────────────────────────── #}
<div class="card shadow-sm mb-3">
    <div class="card-header py-2 d-flex flex-wrap align-items-center gap-2">
        <button class="btn btn-link text-primary fw-bold p-0 text-decoration-none d-flex align-items-center gap-1"
                type="button" data-bs-toggle="collapse" data-bs-target="#dashcam-files-body"
                aria-expanded="false" aria-controls="dashcam-files-body" id="dashcam-files-toggle">
            <i class="fas fa-chevron-right toggle-icon" style="font-size:.7rem;transition:transform .2s;"></i>
            Files on dashcam
        </button>
        <small id="dash-file-summary" class="text-muted ms-1"></small>
        <div class="ms-auto d-flex gap-1 flex-wrap">
            <button id="dash-files-refresh-btn" class="btn btn-sm btn-outline-secondary" type="button">
                <i class="fas fa-sync-alt"></i>
            </button>
            <button id="dash-select-all-btn" class="btn btn-sm btn-outline-secondary" type="button" disabled>All</button>
            <button id="dash-import-selected-btn" class="btn btn-sm btn-primary" type="button" disabled>
                <i class="fas fa-download me-1"></i>Import
            </button>
            <button id="dash-delete-all-btn" class="btn btn-sm btn-outline-danger" type="button"
                    data-confirm="Permanently delete every video from the dashcam? This cannot be undone." disabled>
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </div>
    <div class="collapse" id="dashcam-files-body">
        <div class="card-body p-0">
            {{ data_table(
                "dashcam-file-list",
                [
                    {"key": "selected", "label": "", "sortable": false},
                    {"key": "path", "label": "File", "sortable": true},
                    {"key": "size", "label": "Size", "sortable": true},
                    {"key": "modified", "label": "Modified", "sortable": true},
                    {"key": "actions", "label": "", "sortable": false}
                ],
                "No videos found",
                "Connect the dashcam in USB storage mode, then refresh this list."
            ) }}
        </div>
    </div>
</div>

{# ── Imported videos on Pi ───────────────────────────────────────────── #}
<div class="card shadow-sm mb-3">
    <div class="card-header py-2 d-flex flex-wrap align-items-center gap-2">
        <button class="btn btn-link text-primary fw-bold p-0 text-decoration-none d-flex align-items-center gap-1"
                type="button" data-bs-toggle="collapse" data-bs-target="#local-videos-body"
                aria-expanded="true" aria-controls="local-videos-body" id="local-videos-toggle">
            <i class="fas fa-chevron-down toggle-icon" style="font-size:.7rem;transition:transform .2s;"></i>
            Videos on Pi
        </button>
        <small id="local-video-summary" class="text-muted ms-1">Loading…</small>
        <button id="local-videos-refresh-btn" class="btn btn-sm btn-outline-secondary ms-auto" type="button">
            <i class="fas fa-sync-alt"></i>
        </button>
    </div>
    <div class="collapse show" id="local-videos-body">
        <div class="card-body p-0">
            {{ data_table(
                "local-video-list",
                [
                    {"key": "thumbnail", "label": "", "sortable": false},
                    {"key": "path", "label": "File", "sortable": true},
                    {"key": "size", "label": "Size", "sortable": true},
                    {"key": "modified", "label": "Date", "sortable": true},
                    {"key": "uploaded", "label": "Upload", "sortable": true},
                    {"key": "actions", "label": "", "sortable": false}
                ],
                "No imported videos",
                "Import videos from the connected dashcam to browse and play them here."
            ) }}
        </div>
    </div>
</div>

{# ── Video player modal ──────────────────────────────────────────────── #}
<div class="modal fade" id="video-player-modal" tabindex="-1" aria-labelledby="video-player-modal-title" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark">
            <div class="modal-header border-secondary py-2">
                <h6 class="modal-title text-light text-truncate me-2" id="video-player-modal-title"></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <video id="local-video-player" class="w-100 d-block" style="max-height:75vh;background:#000;"
                       controls preload="metadata"></video>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/dash.js') }}"></script>
    <script src="{{ url_for('static', filename='js/local-videos.js') }}"></script>
    <script>
    // Rotate chevron icons on collapse toggle
    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function (btn) {
        const target = document.querySelector(btn.getAttribute('data-bs-target'));
        if (!target) return;
        const icon = btn.querySelector('.toggle-icon');
        if (!icon) return;
        target.addEventListener('show.bs.collapse', function () { icon.style.transform = 'rotate(90deg)'; });
        target.addEventListener('hide.bs.collapse', function () { icon.style.transform = 'rotate(0deg)'; });
        // Init state
        if (target.classList.contains('show')) icon.style.transform = 'rotate(90deg)';
    });
    </script>
{% endblock %}