{% extends "base.html" %}

{% block title %}Upload Video - HM Video QC{% endblock %}

{% block wizard_nav %}
<div class="wizard-nav">
    <div class="wizard-step active">1. Upload</div>
    <div class="wizard-step">2. Configure</div>
    <div class="wizard-step">3. Results</div>
</div>
{% endblock %}

{% block content %}
<div class="upload-container">
    <h2>Upload Video File</h2>

    {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
    {% endif %}

    <form id="uploadForm" method="POST" action="{{ url_for('upload') }}" enctype="multipart/form-data">
        <div class="drop-zone" id="dropZone">
            <svg class="upload-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20 21H4C3.44772 21 3 20.5523 3 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M21 13V20C21 20.5523 20.5523 21 20 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <p>Drag and drop video file here</p>
            <p class="or-text">or</p>
            <label for="videoFile" class="btn btn-yellow">Choose File</label>
            <input type="file" id="videoFile" name="video_file" accept=".mp4,.mov,.avi,.mkv,.webm,.flv,.wmv,.m4v" hidden>
        </div>

        <div id="fileInfo" class="file-info hidden">
            <p><strong>Selected:</strong> <span id="fileName"></span></p>
            <p><strong>Size:</strong> <span id="fileSize"></span></p>
        </div>

        <button type="submit" id="uploadBtn" class="btn btn-yellow btn-lg" disabled>
            Upload and Continue
        </button>
    </form>

    <div class="supported-formats">
        <h4>Supported Formats:</h4>
        <p>.mp4, .mov, .avi, .mkv, .webm, .flv, .wmv, .m4v</p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% endblock %}