<!doctype html>
<html lang="en">
<head>
    <title>{% block title %}Bazarr{% endblock %}</title>

    {% block head_meta %}
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>

        <link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static',filename='apple-touch-icon.png') }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static',filename='favicon-32x32.png') }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static',filename='favicon-16x16.png') }}">
        <link rel="manifest" href="{{ url_for('static',filename='manifest.json') }}">
        <link rel="mask-icon" href="{{ url_for('static',filename='safari-pinned-tab.svg') }}" color="#5bbad5">
        <link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}">
        <meta name="msapplication-config" content="{{ url_for('static',filename='browserconfig.xml') }}">
        <meta name="theme-color" content="#ffffff">

    {% endblock head_meta %}

    {% block head_css %}
        <link href="{{ url_for('static',filename='noty/noty.css') }}" rel="stylesheet">
        <link href="{{ url_for('static',filename='semantic/semantic.min.css') }}" rel="stylesheet">

        <link href="{{ url_for('static',filename='plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="{{ url_for('static',filename='css/style.css') }}" rel="stylesheet">
        <!-- You can change the theme colors from here -->
        <link href="{{ url_for('static',filename='css/bazarr.css') }}" id="theme" rel="stylesheet">

    {% endblock head_css %}

    {% block head %}
    {% endblock head %}

    {% block head_tail %}
    {% endblock head_tail %}

</head>
<body class="fix-header fix-sidebar card-no-border">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    </svg>
</div>
{% block page_body %}
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <!-- ============================================================== -->
                <!-- Logo -->
                <!-- ============================================================== -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="{{ url_for('redirect_root') }}">
                        <!-- Logo icon -->
                        <b>
                            <img src="{{ url_for('static',filename='logo128.png') }}" alt="homepage" width="40"
                                 class="dark-logo"/>
                        </b></a>
                    <!--End Logo icon -->
                    <!-- Logo text -->
                </div>
                <!-- ============================================================== -->
                <!-- End Logo -->
                <!-- ============================================================== -->
                <div class="navbar-collapse">
                    <!-- ============================================================== -->
                    <!-- toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav mr-auto mt-md-0">
                        <!-- ============================================================== -->
                        <!-- Search -->
                        <!-- ============================================================== -->
                        <li class="nav-item hidden-sm-down search-box">
                            <form class="form-material"><input type="text" class="form-control text-white"
                                                               placeholder="Search...">
                            </form>
                        </li>
                    </ul>
                    <!-- ============================================================== -->
                    <!-- User profile and search -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav my-lg-0">
                        <!-- ============================================================== -->
                        <!-- Profile -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted fas fa-user" href=""
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
                            <div class="dropdown-menu dropdown-menu-right scale-up">
                                <ul class="dropdown-user">
                                    <li><a href="{{ url_for('restart') }}"><i class="fas fa-redo"></i> Restart</a></li>
                                    <li><a href="{{ url_for('shutdown') }}"><i class="fas fa-power-off"></i> Shutdown</a></li>
                                    <li><a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- ============================================================== -->
        <!-- End Topbar header -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <aside class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li><a class="active" href="{{ url_for('series') }}"><i class="fas fa-play"></i><span
                                class="hide-menu"> Series</span></a>
                        </li>
                        <li><a href="{{ url_for('movies') }}"><i class="fas fa-film"></i><span
                                class="hide-menu"> Movies</span></a>
                        </li>
                        <li><a href="{{ url_for('history') }}"><i class="fas fa-clock"></i><span class="hide-menu"> History</span></a>
                        </li>
                        <li><a href="#"><i
                                class="fas fa-exclamation-triangle"></i><span class="hide-menu"> Wanted</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="/"> Missing</a></li>
                                <li><a href="/"> Cutoff Unmet</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i
                                class="fas fa-cogs"></i><span class="hide-menu"> Settings</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="/"> General</a></li>
                                <li><a href="/"> Sonarr</a></li>
                                <li><a href="/"> Radarr</a></li>
                                <li><a href="/"> Subtitles</a></li>
                                <li><a href="/"> Notifications</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i
                                class="fas fa-laptop"></i><span class="hide-menu"> System</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="/"> Tasks</a></li>
                                <li><a href="/"> Logs</a></li>
                                <li><a href="/"> Providers</a></li>
                                <li><a href="/"> Status</a></li>
                                <li><a href="/"> Releases</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </aside>
        <!-- ============================================================== -->
        <!-- End Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">
            {% block body %}

            {% endblock body %}
            <footer class="footer">
                © 2019 Bazarr
            </footer>
        </div>
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End footer -->
    <!-- ============================================================== -->
{% endblock page_body %}


{% block tail_js %}

    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="{{ url_for('static',filename='plugins/jquery/jquery.min.js') }}"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="{{ url_for('static',filename='plugins/popper/popper.min.js') }}"></script>
    <script src="{{ url_for('static',filename='plugins/bootstrap/js/bootstrap.min.js') }}"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="{{ url_for('static',filename='js/jquery.slimscroll.js') }}"></script>
    <!--Menu sidebar -->
    <script src="{{ url_for('static',filename='js/sidebarmenu.js') }}"></script>
    <!--stickey kit -->
    <script src="{{ url_for('static',filename='plugins/sticky-kit-master/dist/sticky-kit.min.js') }}"></script>
    <script src="{{ url_for('static',filename='plugins/sparkline/jquery.sparkline.min.js') }}"></script>
    <!--Custom JavaScript -->
    <script src="{{ url_for('static',filename='js/custom.js') }}"></script>

    <script>
        $('.ui.dropdown').dropdown();

        $('.ui.search')
            .search({
                apiSettings: {
                    url: '{{base_url}}search_json/{query}',
                    onResponse: function (results) {
                        const response = {
                            results: []
                        };
                        $.each(results.items, function (index, item) {
                            response.results.push({
                                title: item.name,
                                url: item.url
                            });
                        });
                        return response;
                    }
                },
                minCharacters: 2
            });

        function BadgesAjax() {
            $.ajax({
                url: "{{url_for('api.badges')}}",
                async: true,
                success: function (data) {
                    console.log(data);
                    if (data['throttled_providers']) {
                        $('#throttled_providers_count').append('<div class="floating ui tiny yellow label" style="left:90% !important;top:0.5em !important;">' + data['throttled_providers'] + '</div>')
                    }
                    if (data['missing_episodes']) {
                        $('#wanted').append('<div class="floating ui tiny yellow label" style="left:90% !important;top:0.5em !important;">' + data['missing_episodes'] + '</div>')
                    }
                    if (data['missing_movies']) {
                        $('#wanted').append('<div id="wanted_movies" class="floating ui tiny green label" style="left:90% !important;top:3em !important;">' + data['missing_movies'] + '</div>')
                    }

                },
                error: (function () {
                    setTimeout(function () {
                        setInterval(ping, 2000);
                    }, 8000);
                })
            })
        }

        BadgesAjax()


        if (window.location.href.indexOf("episodes") > -1) {
            $('.menu_segment').css('background', 'rgba(0, 0, 0, 0.8)');
            $('.menu_segment').css('border-color', '#000000');
            $('#divmenu').css('background', 'rgba(0, 0, 0, 0.8)');
            $('#divmenu').css('box-shadow', '0 0 5px 5px #000000');
        } else if (window.location.href.indexOf("movie/") > -1) {
            $('.menu_segment').css('background', 'rgba(0, 0, 0, 0.9)');
            $('.menu_segment').css('border-color', '#000000');
            $('#divmenu').css('background', 'rgba(0, 0, 0, 0.8)');
            $('#divmenu').css('box-shadow', '0 0 5px 5px #000000');
        } else {
            $('.menu_segment').css('background', '#272727');
            $('.menu_segment').css('border-color', '#272727');
            $('#divmenu').css('background', '#272727');
        }

        $('#restart_link').on('click', function () {
            $('#loader_text').text("Bazarr is restarting. Please Wait...");
            $.ajax({
                url: {{url_for('restart')}},
                async: true,
                error: (function () {
                    setTimeout(function () {
                        setInterval(ping, 2000);
                    }, 8000);
                })
            })
        });

        function ping() {
            $.ajax({
                url: "{{url_for('redirect_root')}}",
                success: function (result) {
                    window.location.href = "{{url_for('redirect_root')}}";
                }
            });
        }

        $(window).on('resize', function () {
            if ($(window).width() < 1024) {
                $('#button_menu').hide();
                $('#dropdown_menu').show();
                $('#search_column').removeClass('ten wide');
            } else {
                $('#dropdown_menu').hide();
                $('#button_menu').show();
                $('#search_column').addClass('ten wide');
            }
        }).resize();

        var url_notifications = location.protocol + "//" + window.location.host + "{{base_url}}notifications";
        var notificationTimeout;
        var timeout;
        var killer;
        var item = {};
        var length = {};

        function doNotificationsAjax() {
            $.ajax({
                url: "{{url_for('notifications')}}",
                success: function (data) {
                    if (data !== "") {
                        data = JSON.parse(data);
                        var msg = data[0];
                        var type = data[1];
                        var duration = data[2];
                        var button = data[3];
                        var queue = data[4];
                        var item = data[5];
                        var length = data[6];

                        if (length === 0) {
                            var message = msg;
                        } else {
                            var message = msg + '<p><div class="ui disabled progress notification_progress" data-value=' + item + ' data-total=' + length + ' style="margin-bottom: -0.25em"><div class="bar"><div class="progress"></div></div></div>'
                        }

                        if (duration === 'temporary') {
                            timeout = 3000;
                            killer = queue;
                        } else if (duration === 'long') {
                            timeout = 15000;
                            killer = queue;
                        } else {
                            timeout = false;
                            killer = false;
                        }

                        if (button === 'refresh') {
                            button = [Noty.button('Refresh', 'ui tiny primary button', function () {
                                window.location.reload()
                            })];
                        } else if (button === 'restart') {
                            // to be completed
                            button = [Noty.button('Restart', 'ui tiny primary button', function () {
                                alert('Restart Not Implemented Yet!')
                            })];
                        } else {
                            button = [];
                        }

                        new Noty({
                            text: message,
                            progressBar: false,
                            animation: {
                                open: null,
                                close: null
                            },
                            type: type,
                            layout: 'bottomRight',
                            theme: 'semanticui',
                            queue: queue,
                            timeout: timeout,
                            killer: killer,
                            buttons: button,
                            force: false
                        }).show();

                        $('.notification_progress').progress({
                            duration: 0,
                            autoSuccess: false,
                            label: 'ratio',
                            text: {
                                ratio: '{value} / {total}'
                            }
                        });
                    }
                },
                complete: function (data) {
                    // Schedule the next
                    if (data.responseText !== "") {
                        notificationTimeout = setTimeout(doNotificationsAjax, 100);
                    } else {
                        notificationTimeout = setTimeout(doNotificationsAjax, 5000);
                    }
                },
                error: function () {
                    notificationTimeout = setTimeout(doNotificationsAjax, 5000);
                }
            });
        }

        // notificationTimeout = setTimeout(doNotificationsAjax, 1000);

        var tasksTimeout;

        function doTasksAjax() {
            $.ajax({
                url: "{{url_for('running_tasks_list')}}",
                dataType: 'json',
                success: function (data) {
                    $('#tasks > tbody  > tr').each(function () {
                        if ($.inArray($(this).attr('id'), data['tasks']) > -1) {
                            $(this).find('td:last').find('div:first').addClass('disabled');
                            $(this).find('td:last').find('div:first').find('i:first').addClass('loading');
                        } else {
                            $(this).find('td:last').find('div:first').removeClass('disabled');
                            $(this).find('td:last').find('div:first').find('i:first').removeClass('loading');
                        }
                    });

                    if ($.inArray('wanted_search_missing_subtitles', data['tasks']) > -1) {
                        $('#wanted_search_missing_subtitles').addClass('disabled');
                        $('#wanted_search_missing_subtitles_movies').addClass('disabled');
                        $('#wanted_search_missing_subtitles').find('i:first').addClass('loading');
                        $('#wanted_search_missing_subtitles_movies').find('i:first').addClass('loading');
                    } else {
                        $('#wanted_search_missing_subtitles').removeClass('disabled');
                        $('#wanted_search_missing_subtitles_movies').removeClass('disabled');
                        $('#wanted_search_missing_subtitles').find('i:first').removeClass('loading');
                        $('#wanted_search_missing_subtitles_movies').find('i:first').removeClass('loading');
                    }

                    {% if 'no' in locals %}
                        if ($.inArray('search_missing_subtitles_{{no}}', data['tasks']) > -1) {
                            $('#search_missing_subtitles').addClass('disabled');
                            $('#search_missing_subtitles').find('i:first').addClass('loading');
                        } else {
                            $('#search_missing_subtitles').removeClass('disabled');
                            $('#search_missing_subtitles').find('i:first').removeClass('loading');
                        }

                        if ($.inArray('search_missing_subtitles_movie_{{no}}', data['tasks']) > -1) {
                            $('#search_missing_subtitles_movie').addClass('disabled');
                            $('#search_missing_subtitles_movie').find('i:first').addClass('loading');
                        } else {
                            $('#search_missing_subtitles_movie').removeClass('disabled');
                            $('#search_missing_subtitles_movie').find('i:first').removeClass('loading');
                        }
                    {% endif %}
                },
                complete: function (data) {
                    // Schedule the next
                    tasksTimeout = setTimeout(doTasksAjax, 5000);
                }
            });
        }

        // tasksTimeout = setTimeout(doTasksAjax, 500);

        $(window).bind('beforeunload', function () {
            clearTimeout(tasksTimeout);
            clearTimeout(notificationTimeout);
        });
    </script>
{% endblock tail_js %}
{% block tail %}
{% endblock tail %}
</body>
</html>