<div class="control-btns">
    <button class="btn btn-success show-transcodate-form">Transcodate</button>
    <button class="btn btn-warning stop-transcoding" style="display: none">Stop transcoding</button>
</div>

<div class="transcodate-form-container" style="display: none">
    <div class="form-control">
        <input type="hidden" name="path" value="{{ file.path }}">
        <strong>{{ file.info.video[0].codec }}</strong>
        <span class="arrow-to"> >> </span>
        <select id="codec" name="codec" class="form-select">
          <option value="libx265" selected>h.265 (HEVC)</option>
          <option value="libx264">h.264 (AVC)</option>
          <option value="libaom-av1">AV1</option>
          <option value="libvpx-vp9">VP9</option>
        </select>
    </div>
    <div class="form-control">
        <strong>{{ file.info.video[0].resolution }}</strong>
        <span class="arrow-to"> >> </span>
        <select id="resolution" name="resolution" class="form-select" data-max-resolution="{{ file.info.video[0].resolution.split('x')[0] }}">
          <option value="3840">UHD (2160p)</option>
          <option value="2560">QHD (1440p)</option>
          <option value="1920">FHD (1080p)</option>
          <option value="1280">HD (720p)</option>
          <option value="640">SD (480p)</option>
        </select>
    </div>

    <div class="form-control">
        <strong>Preset</strong>
        <select id="preset-libx" name="preset-libx" class="form-select">
          <option value="ultrafast">Ultrafast</option>
          <option value="superfast">Superfast</option>
          <option value="veryfast">Veryfast</option>
          <option value="faster">Faster</option>
          <option value="fast" selected>Fast</option>
          <option value="medium">Medium</option>
          <option value="slow">Slow</option>
          <option value="slower">Slower</option>
          <option value="veryslow">Veryslow</option>
        </select>

        <select id="preset-vp9" name="preset-vp9" class="form-select" style="display: none">
          <option value="0">cpu-used 0</option>
          <option value="1" selected>cpu-used 1</option>
          <option value="2">cpu-used 2</option>
          <option value="3">cpu-used 3</option>
          <option value="4">cpu-used 4</option>
          <option value="5">cpu-used 5</option>
        </select>

        <select id="preset-av1" name="preset-av1" class="form-select" style="display: none">
          <option value="0">cpu-used 0</option>
          <option value="1">cpu-used 1</option>
          <option value="2">cpu-used 2</option>
          <option value="3" selected>cpu-used 3</option>
          <option value="4">cpu-used 4</option>
          <option value="5">cpu-used 5</option>
          <option value="6">cpu-used 6</option>
          <option value="7">cpu-used 7</option>
          <option value="8">cpu-used 8</option>
        </select>
    </div>

    <div class="form-control">
        <strong>{{ file.info.video[0].bitrate }}</strong>
        <span class="arrow-to"> >> </span>
        <div class="input-group">
            <input type="number" id="crf" step="1" name="crf" class="form-control" placeholder="23" value="23" max="51" min="1">
            <span class="input-group-text">CRF <span class="crf-range">0-51</span></span>
        </div>
    </div>

    <div class="btns">
        <button class="btn btn-warning run-transcodate">Run</button>
        <button class="btn close-transcodate-form-container">Cancel</button>
    </div>
</div>

<div class="progress-bar-container mt-3" style="display: none">
    {% set bar_id = "single-transcoding-progress" %}
    {% include "components/progress-bar-line.html" %}
</div>

<div id="progress" class="alert alert-dark" style="display: none" data-file-path="{{ file.path }}"></div>

<script src="/static/js/components/single-transcoding.js" defer></script>