{% extends "base.html" %}

{% block title %} Skimmit - Instant Summaries for Articles and YouTube Videos {% endblock%}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-6 mx-auto">
            <ul class="nav nav-pills mb-5 mt-4" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                        aria-selected="true">Article</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                        aria-selected="false">YouTube Video</button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"
                    tabindex="0">
                    <form method="post" action="/summarize" id="article-form">
                        <input type="url" name="article" placeholder="Enter aticle link" class="form-control" required>
                        <div class="d-grid gap-2 mt-4">
                            <button class="btn btn-secondary" type="submit">Summarize Article</button>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                    tabindex="0">
                    <form method="post" action="/summarize" id="video-form">
                        <input type="url" name="video" placeholder="Enter video link" class="form-control" required>
                        <div class="d-grid gap-2 mt-4">
                            <button class="btn btn-secondary" type="submit">Summarize Video </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="my-5" id="result">
                <!-- Will be shown after summary -->
            </div>
            <div class="my-5 text-center d-none" id="loading">
                <div class="py-5">
                    <div class="d-flex flex-row justify-content-center mt-5">
                        <p class="me-5" id="loading-text">Generating summary...</p>
                        <div class="spinner-border small ms-5" role="status">
                            <span class="visually-hidden">Generating summary...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}