{% extends "base.html" %} {% block nav %}
<nav class="left drawer min">
    <header>
        <nav>
            <img src="https://www.beercss.com/favicon.png" class="circle">
            <h6>Toloka2Web MD3</h6>
        </nav>
    </header>
    <a href="/">
        <i>home</i>
        <div>Головна</div>
    </a>
    <a class="active" href="add">
        <i>add</i>
        <div>Додати</div>
    </a>
    <a href="settings">
        <i>settings</i>
        <div>Налаштування</div>
    </a>

    <div class="divider small-margin"></div>
    <label>Інше</label>
    <a href="about">
        <i>person</i>
        <div>Про застосунок</div>
    </a>
    <a href="help">
        <i>help</i>
        <div>Допомога</div>
    </a>
</nav>

<nav class="left m">
    <header>
        <img src="https://www.beercss.com/favicon.png" class="circle">
    </header>
    <a>
        <i>home</i>
        <div>Home</div>
    </a>
    <a>
        <i>search</i>
        <div>Search</div>
    </a>
    <a>
        <i>settings</i>
        <div>Settings</div>
    </a>
    <a>
        <i>more_vert</i>
        <div>More</div>
    </a>
</nav>

<nav class="bottom s">
    <a>
        <i>home</i>
    </a>
    <a>
        <i>search</i>
    </a>
    <a>
        <i>settings</i>
    </a>
    <a>
        <i>more_vert</i>
    </a>
</nav>
{% endblock %} {% block content %}

<p class="large-text">
<h6><i>add</i> Додати новий контент</h6>
</p>

<nav class="scroll">
    <div class="center-align">
        <button class="circle small" id="step_1"><i>search</i></button>
        <div class="small-margin">Знайти торрент</div>
    </div>
    <hr class="max">
    <div class="center-align">
        <button class="circle small" id="step_2"><i>info</i></button>
        <div class="small-margin">Метадані</div>
    </div>
    <hr class="max">
    <div class="center-align">
        <button class="circle small" disabled id="step_3"><i>add</i></button>
        <div class="small-margin">Додати WIP</div>
    </div>
</nav>

<form action="/add" id="search_form">
    <div class="field large prefix round fill">
        <i class="front">search</i>
        <input id="search-box" name="query" type="text" placeholder="https://toloka.to/t680082">
        </menu>
    </div>
</form>

{% if torrent %}
<article id="torrent_card" class="no-padding">
    <div class="grid large-space">
        <div class="s12 m6 l3">
            <img class="responsive" src={{torrent.img}}>
        </div>
        <div class="s9">
            <div class="padding">
                <h5 class="primary-text">{{torrent.name}}</h5>

                <hr class="medium">

                <div>
                    <a class="chip no-margin"><i>language_gb_english</i><span>{{torrent.size}}</span></a>
                    <a class="chip no-margin"><i>signature</i><span>{{torrent.author}}</span></a>
                    <a class="chip no-margin"><i>calendar_month</i><span>{{torrent.date}}</span></a>
                    <a class="chip no-margin"><i>star_rate</i><span>{{torrent.rating}}</span></a>
                    <a class="chip no-margin"><i>thumb_up</i><span>{{torrent.thanks}}</span></a>
                </div>

                <hr class="large">

                {{torrent.description}}

                <hr class="large">

                <div>
                    <a class="green no-margin button" onclick="twoStage('{{torrent.url}}')">
                        <i>add</i>
                        <span>Додати</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</article>

<article class="center-align" style="display: none;" id="two_stage">
    <form action="/add">
        <div class="grid">

            <div class="field label prefix border s6">
                <i>folder</i>
                <input type="text" name="dirname" value="{{torrent.files[0].folder_name}}">
                <label>Назва директорії</label>
            </div>

            <div class="field label prefix border s6">
                <i>numbers</i>
                <select name="season-index">
                    {% for season in range(1, 10) %}
                        <option>{{season}}</option>
                    {% endfor %}
                  </select>
                <label>Індекс сезону</label>
            </div>

            <div class="field label prefix border s6">
                <i>numbers</i>
                <select name="episode-index">
                    {% for option_index in range(episode_integers|length) %}
                        <option value="{{option_index + 1}}">{{episode_integers[option_index]}}</option>
                    {% endfor %}
                    
                  </select>
                <label>Індекс епізоду</label>
            </div>

            <div class="field label prefix border s6">
                <i>route</i>
                <input type="text" name="filepath" value="{{default_dir}}">
                <label>Місце завантаження</label>
            </div>

            <input style="display: none;" type="text" name="toloka_url" value="{{torrent.url}}">

            <div class="field label prefix border s6">
                <i>numbers</i>
                <input type="number" name="adjusted-episode-number" value="0">
                <label>Скільки додати до епізоду</label>
            </div>

            <button class="border small-round s12" type="submit">
                <i>add</i>
                <span>Додати</span>
            </button>
        </div>
    </form>
</article>
{% endif %}

<script>
    function twoStage() {
        document.getElementById("search_form").remove();
        document.getElementById("torrent_card").remove();
        document.getElementById("step_1").innerHTML = "<i>done</i>"

        $("#two_stage").toggle();
    }
</script>

{% endblock %}