{% extends "base.html" %}
{% block title %}Clip Finder{% endblock %}
{% block content %}
<form method="post" action="/submit" enctype="multipart/form-data" class="card">
  <h2>Novo vídeo</h2>

  <div class="source-toggle">
    <label><input type="radio" name="source_type" value="upload" checked onclick="toggleSource()"> Enviar ficheiro</label>
    <label><input type="radio" name="source_type" value="url" onclick="toggleSource()"> Link do YouTube</label>
  </div>

  <div id="upload-field">
    <label>Ficheiro de vídeo</label>
    <input type="file" name="video_file" accept="video/*">
  </div>

  <div id="url-field" style="display:none">
    <label>URL do YouTube</label>
    <input type="text" name="youtube_url" placeholder="https://youtube.com/watch?v=...">
  </div>

  <label>Número de clipes</label>
  <input type="number" name="n" value="5" min="1" max="15">

  <label><input type="checkbox" name="vertical" value="true"> Formato vertical (9:16)</label>
  <label><input type="checkbox" name="captions" value="true"> Legendas embutidas</label>

  <button type="submit">Processar</button>
</form>

<script>
function toggleSource() {
  const isUrl = document.querySelector('input[name=source_type]:checked').value === 'url';
  document.getElementById('upload-field').style.display = isUrl ? 'none' : 'block';
  document.getElementById('url-field').style.display = isUrl ? 'block' : 'none';
}
</script>
{% endblock %}