{% extends 'base.html' %}
{% load static %}

{% block title %}AI Viral Rant Video Generator{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="text-center mb-5">
                <h1 class="display-4">AI Viral Rant Video Generator</h1>
                <p class="lead">Turn your ideas into short-form viral videos for TikTok, YouTube Shorts, and Reels.</p>
            </div>

            <form>
                <div class="mb-3">
                    <label for="rantIdea" class="form-label">Rant Idea / Topic</label>
                    <input type="text" class="form-control" id="rantIdea" placeholder="e.g., People who walk slow in grocery stores">
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="contentType" class="form-label">Content Type</label>
                        <select class="form-select" id="contentType">
                            <option selected>Roblox-style rant</option>
                            <option>Reddit story / comment</option>
                            <option>Text message / chat format</option>
                            <option>Subtitles only</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="targetPlatform" class="form-label">Target Platform</label>
                        <select class="form-select" id="targetPlatform">
                            <option selected>YouTube Shorts</option>
                            <option>TikTok</option>
                            <option>Instagram Reels</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                  <div class="col-md-6 mb-3">
                      <label for="subtitleStyle" class="form-label">Subtitle Style</label>
                      <select class="form-select" id="subtitleStyle">
                          <option selected>Bold & Clean</option>
                          <option>Gaming</option>
                          <option>Minimal</option>
                      </select>
                  </div>
                  <div class="col-md-6 mb-3">
                      <label for="backgroundGameplay" class="form-label">Background Gameplay</label>
                      <select class="form-select" id="backgroundGameplay">
                          <option selected>Roblox</option>
                          <option>Subway Surfers</option>
                          <option>Minecraft Parkour</option>
                          <option>Dynamic Abstract</option>
                      </select>
                  </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="language" class="form-label">Language</label>
                        <select class="form-select" id="language">
                            <option selected>English</option>
                            <option>Spanish</option>
                            <option>French</option>
                        </select>
                    </div>
                </div>

                <div class="d-grid mt-4">
                    <button type="submit" class="btn btn-primary btn-lg" disabled>Create Video</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}