{% extends '_main.html' %}
{%- from 'settings_general.html' import settings_general with context %}
{%- from 'settings_subtitles.html' import settings_subtitles with context %}
{%- from 'settings_notifications.html' import settings_notifications with context %}
{%- from 'settings_radarr.html' import settings_radarr with context %}
{%- from 'settings_sonarr.html' import settings_sonarr with context %}
{%- from 'providers.html' import settings_providers1 with context %}

{% block title %}Settings - Bazarr{% endblock %}
{% block body %}

    <div class="container-fluid">
    <!-- ============================================================== -->
            <!-- Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <div class="row page-titles">
                <div class="col-md-5 col-8 align-self-center">
                    <h3 class="text-themecolor m-b-0 m-t-0"><i class="fas fa-sync"></i></h3>
                </div>
                <div class="col-md-7 col-4 align-self-center">
                    <div class="d-flex m-t-10 justify-content-end">
                        <div class="d-flex m-r-20 m-l-10 hidden-md-down">
                            <div class="chart-text m-r-10">
                                <h5 class="m-t-0 text-white">Some page settings</h5></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- End Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
        <form name="settings_form" id="settings_form" action="{{ base_url }}save_settings" method="post" class="ui form"
              autocomplete="off">
            <div id="form_validation_error" class="ui error message">
                <p>Some fields are in error and you can't save settings until you have corrected them. Be sure to check
                    in
                    every tabs.</p>
            </div>
            <div class="ui top attached tabular menu">
                <a class="tabs item active" data-tab="general">General</a>
                <a class="tabs item" id="sonarr_tab" data-tab="sonarr">Sonarr</a>
                <a class="tabs item" id="radarr_tab" data-tab="radarr">Radarr</a>
                <a class="tabs item" data-tab="subtitles">Subtitles</a>
                <a class="tabs item" data-tab="notifier">Notifications</a>
            </div>
            <div class="ui bottom attached tab segment active" data-tab="general">
                <div class="ui container">
                    <button class="submit ui blue right floated button" type="submit" value="Submit"
                            form="settings_form">
                        Save
                    </button>
                </div>
                {% include 'settings_general.html' %}
            </div>
            <div class="ui bottom attached tab segment" data-tab="sonarr">
                <div class="ui container">
                    <button class="submit ui blue right floated button" type="submit" value="Submit"
                            form="settings_form">
                        Save
                    </button>
                </div>
                {% include 'settings_sonarr.html' %}
            </div>
            <div class="ui bottom attached tab segment" data-tab="radarr">
                <div class="ui container">
                    <button class="submit ui blue right floated button" type="submit" value="Submit"
                            form="settings_form">
                        Save
                    </button>
                </div>
                {% include 'settings_radarr.html' %}
            </div>
            <div class="ui bottom attached tab segment" data-tab="subtitles">
                <div class="ui container">
                    <button class="submit ui blue right floated button" type="submit" value="Submit"
                            form="settings_form">
                        Save
                    </button>
                </div>
                {% include 'settings_subtitles.html' %}
            </div>
            <div class="ui bottom attached tab segment" data-tab="notifier">
                <div class="ui container">
                    <button class="submit ui blue right floated button" type="submit" value="Submit"
                            form="settings_form">
                        Save
                    </button>
                </div>
                {% include 'settings_notifications.html' %}
            </div>
        </form>
    </div>
{% endblock body %}
{% block tail %}

    <script src="{{ url_for('static',filename='js/settings_validation.js') }}" type="text/javascript"></script>

    <script>
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }

        if (getQueryVariable("saved") == 'true') {
            new Noty({
                text: 'Settings saved.',
                timeout: 5000,
                progressBar: false,
                animation: {
                    open: null,
                    close: null
                },
                killer: true,
                type: 'info',
                layout: 'bottomRight',
                theme: 'semanticui'
            }).show();
        }

        $('.menu .item')
            .tab()
        ;

        $('a:not(.tabs), button:not(.cancel, .test, .no_loader)').on('click', function () {
            $('#loader').addClass('active');
        });

        $('a[target="_blank"]').on('click', function () {
            $('#loader').removeClass('active');
        });

        $(function () {
            $('.form').form('validate form');
            $('#loader').removeClass('active');
        });

        $(".form :input").on('change paste keyup focusout', function () {
            $('.form').form('validate form');
            $('#loader').removeClass('active');
        });

        // Don't move this part to settings_general.tpl as #settings_form is undefined in this template
        if ($('#settings_proxy_type').val() === "None") {
            $('.proxy_option').hide();
            $('#settings_form').form('remove rule', 'settings_proxy_url', 'empty');
            $('#settings_form').form('remove rule', 'settings_proxy_port', 'empty');
            $('#settings_form').form('remove rule', 'settings_proxy_port', 'integer[1..65535]');
        } else {
            $('#settings_form').form('add rule', 'settings_proxy_url', {
                rules: [{
                    type: 'empty',
                    prompt: '"General / Proxy settings / Hostname" must have a value'
                }]
            });
            $('#settings_form').form('add rule', 'settings_proxy_port', {
                rules: [{
                    type: 'empty',
                    prompt: '"General / Proxy settings / Port" must have a value'
                }]
            });
            $('#settings_form').form('add rule', 'settings_proxy_port', {
                rules: [{
                    type: 'integer[1..65535]',
                    prompt: '"General / Proxy settings / Port" must be an integer between 1 and 65535'
                }]
            });
        }

        // Don't move this part to settings_general.tpl as #settings_form is undefined in this template
        $('#settings_proxy_type').dropdown('setting', 'onChange', function () {
            if ($('#settings_proxy_type').val() === "None") {
                $('.proxy_option').hide();
                $('#settings_form').form('remove rule', 'settings_proxy_url', 'empty');
                $('#settings_form').form('remove rule', 'settings_proxy_port', 'empty');
                $('#settings_form').form('remove rule', 'settings_proxy_port', 'integer[1..65535]');
                $('.form').form('validate form');
                $('#loader').removeClass('active');
            } else {
                $('.proxy_option').show();
                $('#settings_form').form('add rule', 'settings_proxy_url', {
                    rules: [{
                        type: 'empty',
                        prompt: '"General / Proxy settings / Hostname" must have a value'
                    }]
                });
                $('#settings_form').form('add rule', 'settings_proxy_port', {
                    rules: [{
                        type: 'empty',
                        prompt: '"General / Proxy settings / Port" must have a value'
                    }]
                });
                $('#settings_form').form('add rule', 'settings_proxy_port', {
                    rules: [{
                        type: 'integer[1..65535]',
                        prompt: '"General / Proxy settings / Port" must be an integer between 1 and 65535'
                    }]
                });
                $('.form').form('validate form');
                $('#loader').removeClass('active');
            }
        });
    </script>
    {{ settings_general() }}
    {{ settings_subtitles() }}
    {{ settings_notifications() }}
    {{ settings_radarr() }}
    {{ settings_sonarr() }}
    {{ settings_providers1() }}
{% endblock tail %}