{% extends 'base.html' %}

{% block title %}Eagle Eye - Create Job{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/create_job.css">
    <script src="/static/js/create_job.js" defer></script>
{% endblock %}

{% block content %}
     <div style="width: 600px;">
         <h2>Create Job - Please select your files</h2>

         <div style="margin-bottom: 10px;">
             <button onclick="handleFilesSelected()">Clear Selections</button>
             <label>Files Selected: </label>
             <label id="file-selection-count-label">0</label>
         </div>

         <div id="file-selection-div" class="rounded-selection-box">
             <form id="job-config" action="/submit-job" method="post" enctype="multipart/form-data">
                 <input type="file" id="file-selector-input" multiple required name="job-files" accept="image/*" style="display:none"/>
                 <input type="hidden" id="job-id" name="job-id" value="{{ job_id }}">
             </form>

             <div id="file-selection-list">
                 <h5>Drag and drop files or click to browse</h5>
             </div>
         </div>

         <div id="reference-form-selection">
             <h4>Reference Form:</h4>
             {% for form in reference_forms %}
                <div>
                    <input
                            type="radio"
                            form="job-config"
                            id="ref-{{ form.name }}"
                            name="reference-form"
                            value="{{ form.name }}"
                            {% if form.default %}
                                checked
                            {% endif %}
                    >
                    <label for="ref-{{ form.name }}">{{ form.name }}</label>
                </div>
             {% endfor %}
         </div>

         <div style="margin-top: 10px;">
             <input type="checkbox" form="job-config" name="auto-progress" id="auto-progress" value="Auto-Progress" checked/>
             <label for="auto-progress">Auto Progress |</label>
             <label for="job-name">Job Name:</label>
             <input type="text" form="job-config" name="job-name" id="job-name" value="{{ job_id }}" style="width: 300px"/>
             <input type="submit" form="job-config" value="Submit"/>
         </div>
     </div>
{% endblock %}
