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

{% block title %}Viral YouTube Content Generator{% endblock %}

{% block head %}
<meta name="description" content="Generate viral tags, hashtags, and titles for your YouTube videos using AI. Enter a topic to get SEO-friendly suggestions.">
<meta property="og:title" content="Viral YouTube Content Generator">
<meta property="og:description" content="Generate viral tags, hashtags, and titles for your YouTube videos using AI.">
{% endblock %}

{% block content %}
<div class="hero-section">
    <div class="hero-content">
        <h1 class="mb-3">Generate Viral YouTube Content</h1>
        <p class="lead mb-4">Enter your video topic and get instant, SEO-friendly titles, tags, and hashtags.</p>

        <form method="post" class="generator-form row justify-content-center align-items-center">
            {% csrf_token %}
            <div class="col-md-6 mb-3 mb-md-0">
                <input type="text" name="topic" class="form-control" placeholder="e.g., 'Django for Beginners'" required>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-generate w-100">Generate</button>
            </div>
        </form>

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

{% if results %}
<div class="results-section">
    <h2>Your Results for "{{ topic }}"</h2>
    <div class="row">
        <div class="col-md-12">
            <div class="result-item">
                <h3>Suggested Viral Title (H1)</h3>
                <p class="h1-result">{{ results.title }}</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="result-item">
                <h3>Suggested Hashtags</h3>
                <div>
                    {% for tag in results.hashtags %}
                        <span class="hashtag">{{ tag }}</span>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="result-item">
                <h3>Suggested Tags</h3>
                <p>{{ results.tags|join:", " }}</p>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}
