{% extends "base.html" %}
{% block nav %}
<nav class="left drawer">
    <header>
        <nav>
            <img src="https://www.beercss.com/favicon.png" class="circle">
            <h6>Toloka2Web MD3</h6>
        </nav>
    </header>
    <a class="active" href="/">
        <i>home</i>
        <div>Головна</div>
    </a>
    <a 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>hub</i> Торенти</h6>
</p>
<button class="round fill">
    <span>Сортування</span>
    <i>arrow_drop_down</i>
    <menu>
        <a href="search?query=&sort=name">За назвою</a>
        <a href="search?query=&sort=date">За датою</a>
        <a href="search?query=&sort=releasename">За релізером</a>
    </menu>
</button>

<p class="large-text">
<h6><i>work</i> Дії</h6>
</p>
<a class="chip" onclick="updateByCodename('')">
    <i id="update_all_icon">done_all</i>
    <span>Оновити</span>
</a>

<form action="/">
    <div class="field large prefix round fill">
        <i class="front">search</i>
        <input id="search-box" name="query" type="text">
        </menu>
    </div>
</form>
{%for item in titles%}
<article class="no-padding" id="{{item.codename}}">
    <div class="grid">
        <div class="s12 m6 l3">
            <img class="responsive " src={{item.image}}>
        </div>
        <div class="s9">
            <div class="padding">
                <h5 class="primary-text">{{item.torrent_name}} ({{item.codename}})</h5>
                
                <hr class="medium">

                <div>
                    <a class="chip no-margin"><i>route</i><span>{{item.download_dir}}</span></a>
                    <a class="chip no-margin"><i>signature</i><span>{{item.release_group}}</span></a>
                    <a class="chip no-margin"><i>calendar_month</i><span>{{item.publish_date}}</span></a>
                    <a class="chip no-margin"><i>tag</i><span>{{item.hash}}</span></a>
                </div>
                
                <hr class="large">

                <div>
                    <a class="chip primary-border no-margin" href="https://toloka.to/{{item.guid}}">
                        <i>link</i>
                        <span>Посилання</span>
                    </a>
                    <a class="chip green-border no-margin" onclick="updateByCodename('{{item.codename}}')">
                        <i>update</i>
                        <span>Оновити</span>
                    </a>
                    <a class="chip amber-border no-margin" onclick="editByCodename('{{item.codename}}')">
                        <i>edit</i>
                        <span>Редагувати</span>
                    </a>
                    <a class="chip red-border no-margin" onclick="deleteByCodename('{{item.codename}}')">
                        <i>delete</i>
                        <span>Видалити</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</article>

{%endfor%}
<dialog id="dialog">
    <h5 class="primary-text" id="torrent_title">Інформація</h5>
    <div id="torrent_info"></div>
    <nav class="right-align no-space">
        <button class="transparent link" onclick="document.querySelector('#dialog').close();">Ок</button>
    </nav>
</dialog>
<script>
    function deleteByCodename(codename) {
        fetch(`/delete/${codename}`);
        document.getElementById(codename).remove();
    }

    function editByCodename(codename) {
        location.href = (`/edit/${codename}`);
    }

    function updateByCodename(codename) {
        if (codename == "") {
            $('#update_all_icon').html("update")
        }
        $.ajax({
            url: `/update/${codename}`,
            type: 'GET',
            success: function (response) {
                if (response.hasOwnProperty("error")) {
                    $('#torrent_title').html("Помилка")
                    $('#torrent_info').html(`${response.error}`)
                    document.querySelector('#dialog').showModal();
                } else {
                    $('#update_all_icon').html("done_all")

                    var operation_html = ""
                    document.querySelector('#dialog').showModal();
                    for (var i = 0; i < response.operation_logs.length; i++) {
                        operation_html += `* ${response.operation_logs[i]}<br>`
                    }
                    $('#torrent_info').html(`${operation_html}`)
                }

            },
            error: function (result) {
                document.querySelector('#dialog').showModal();
            }
        });
    }
</script>
{% endblock %}