{% extends "base.html" %}

{% block title %}Scan Remote Mappings - red-plex{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-search text-primary"></i> Scan Remote Mappings</h1>
        <a href="{{ url_for('remote_mappings') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Remote Mappings
        </a>
    </div>

    {% if not processing %}
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-gear"></i> Scan Configuration</h5>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="mb-3">
                            <label for="site" class="form-label">Site</label>
                            <select name="site" id="site" class="form-select" required>
                                <option value="">Select a site...</option>
                                <option value="red">RED (Redacted)</option>
                                <option value="ops">OPS (Orpheus)</option>
                            </select>
                            <div class="form-text">Choose which site to scan against for mapping creation</div>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="always_skip" id="always_skip">
                            <label class="form-check-label" for="always_skip">
                                Always skip albums with multiple matches
                            </label>
                            <div class="form-text">When enabled, albums with multiple search results will be automatically skipped without prompting</div>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search"></i> Start Scan
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> Scan Process</h5>
                </div>
                <div class="card-body">
                    <p>The scan process will:</p>
                    <ol>
                        <li>Identify unscanned albums in your Plex library</li>
                        <li>Search for each album on the selected site</li>
                        <li>Create mappings between Plex items and site groups</li>
                        <li>Store associated tags for collection creation</li>
                    </ol>
                    <div class="alert alert-warning" role="alert">
                        <small><strong>Note:</strong> This is an incremental process. Only albums without existing mappings will be processed.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script>
    const socket = io();
    
    socket.on('status_update', function(data) {
        // Global log monitor will handle status updates
    });
</script>
{% endblock %}