{# Modal Street View pour orientation #}
<div class="modal fade" id="streetViewModal" tabindex="-1" aria-labelledby="streetViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="streetViewModalLabel">
                    <i class="fas fa-street-view me-2"></i>
                    {{ 'gps.street_view_orientation'|trans }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-0">
                <!-- Instructions Street View -->
                <div class="alert alert-info m-3 mb-2">
                    <div class="row">
                        <div class="col-md-8">
                            <strong>{{ 'gps.streetview_instructions_title'|trans }}</strong>
                            <ul class="mb-0 mt-2">
                                <li>{{ 'gps.streetview_instruction_1'|trans }}</li>
                                <li>{{ 'gps.streetview_instruction_2'|trans }}</li>
                                <li>{{ 'gps.streetview_instruction_3'|trans }}</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <!-- Contrôles d'orientation -->
                            <div class="card">
                                <div class="card-body p-2">
                                    <label class="form-label small mb-1">{{ 'gps.heading'|trans }}</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" id="headingValue" class="form-control" 
                                               min="0" max="360" step="0.1" value="0">
                                        <span class="input-group-text">°</span>
                                    </div>
                                    <div class="mt-2">
                                        <button type="button" class="btn btn-outline-primary btn-sm me-1" id="rotateLeft">
                                            <i class="fas fa-undo"></i> -45°
                                        </button>
                                        <button type="button" class="btn btn-outline-primary btn-sm" id="rotateRight">
                                            <i class="fas fa-redo"></i> +45°
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Street View Container -->
                <div id="streetViewContainer" style="height: 500px; width: 100%;">
                    <!-- Street View sera chargée ici -->
                    <div class="d-flex align-items-center justify-content-center h-100" id="streetViewLoader">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">{{ 'common.loading'|trans }}</span>
                            </div>
                            <p class="mt-2">{{ 'gps.loading_streetview'|trans }}</p>
                        </div>
                    </div>
                </div>

                <!-- Message si Street View non disponible -->
                <div id="streetViewNotAvailable" class="alert alert-warning m-3" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    {{ 'gps.streetview_not_available'|trans }}
                </div>
            </div>
            
            <div class="modal-footer">
                <div class="d-flex justify-content-between w-100">
                    <div>
                        <!-- Informations sur l'orientation -->
                        <small class="text-muted" id="orientationInfo">
                            {{ 'gps.current_heading'|trans }}: <span id="currentHeadingDisplay">0°</span>
                        </small>
                    </div>
                    <div>
                        <button type="button" class="btn btn-outline-secondary me-2" data-bs-dismiss="modal">
                            {{ 'common.cancel'|trans }}
                        </button>
                        <button type="button" class="btn btn-primary" id="confirmOrientation" disabled>
                            <i class="fas fa-check me-1"></i>
                            {{ 'gps.confirm_orientation'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>