{% extends '_main.html' %}

{% block title %}Languages - Bazarr{% endblock %}

{% block page_head %}
    <style>
        .warning {
            color: red;
        }

        table.dataTable tbody tr.selected a, table.dataTable tbody th.selected a, table.dataTable tbody td.selected a {
            color: revert;
        }
    </style>
{% endblock page_head %}

{% block bcleft %}
    <div class="">
        <button class="btn btn-outline" id="save_button">
            <div>
                <span class="fa-stack">
                    <i class="fas fa-save fa-stack-2x align-top text-themecolor text-center font-20" aria-hidden="true"></i>
                    <i id="save_button_checkmark" class="fas fa-check fa-stack-2x" style="color:green;"></i>
                </span>
            </div>
            <div class="align-bottom text-themecolor small text-center">Save</div>
        </button>
    </div>
{% endblock bcleft %}

{% block bcright %}

{% endblock bcright %}

{% block body %}
    <div class="container-fluid" style="padding-top: 3em;">
        <form class="form" name="settings_form" id="settings_form">
            <h4>Subtitles Languages</h4>
            <hr/>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Single Language</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-single_language" name="settings-general-single_language">
                        <span class="custom-control-label" for="settings-general-single_language"></span>
                    </label>
                    <label>Download a single Subtitles file without adding the language code to the filename.</label>
                    <label class="warning">We don't recommend enabling this option unless absolutely required (ie: media player not supporting language code in subtitles filename). Results may vary.</label>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Languages Filter</b>
                </div>
                <div class="form-group col-sm-8 pl-sm-0">
                    <select class="selectpicker" id="enabled_languages" name="enabled_languages" data-live-search="true" multiple></select>
                </div>
            </div>
            <br>

            <h4>Languages Profiles</h4>
            <hr/>
            <div class="row">
                <div class="col-sm-8">
                    <table class="table table-striped" id="languages_profiles" style="width:100%;">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Cutoff</th>
                            <th>Languages</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <br>

            <h4>Default Settings</h4>
            <hr>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Series Default Settings</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-serie_default_enabled" name="settings-general-serie_default_enabled">
                        <span class="custom-control-label" for="settings-general-serie_default_enabled"></span>
                    </label>
                    <label>Apply only to Series added to Bazarr after enabling this option.</label>
                </div>
            </div>
            <div id="series_default_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Languages Profile Id</b>
                    </div>
                    <div class="form-group col-sm-8 pl-sm-0">
                        <select class="selectpicker" id="settings-general-serie_default_profile" name="settings-general-serie_default_profile"></select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Movies Default Settings</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-movie_default_enabled" name="settings-general-movie_default_enabled">
                        <span class="custom-control-label" for="settings-general-movie_default_enabled"></span>
                    </label>
                    <label>Apply only to Movies added to Bazarr after enabling this option.</label>
                </div>
            </div>
            <div id="movies_default_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Languages Profile Id</b>
                    </div>
                    <div class="form-group col-sm-8 pl-sm-0">
                        <select class="selectpicker" id="settings-general-movie_default_profile" name="settings-general-movie_default_profile"></select>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div id="addModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Languages Profile</h5><br>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form" name="add_form" id="add_form">
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Profile name
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="add_profile_name" name="add_profile_name" value="">
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Languages
                                </div>
                                <div class="col-sm-8">
                                    <table class="table table-striped" id="add_languages_profiles" style="width:100%;">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>Id</th>
                                            <th>Language</th>
                                            <th>Forced Only</th>
                                            <th>Hearing-Impaired Only</th>
                                            <th>Ignore If Matching Audio Track</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Language ID cutoff (ignore others if existing)
                                </div>
                                <div class="col-sm-8">
                                    <select class="selectpicker show-tick" id="add_language_cutoff" name="add_language_cutoff">

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="add_save_button" class="btn btn-info">Add</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="editModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Languages Profile</h5><br>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form" name="edit_form" id="edit_form">
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Profile name
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="edit_profile_name" name="edit_profile_name" value="">
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Languages
                                </div>
                                <div class="col-sm-8">
                                    <table class="table table-striped" id="edit_languages_profiles" style="width:100%;">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>Id</th>
                                            <th>Language</th>
                                            <th>Forced Only</th>
                                            <th>Hearing-Impaired Only</th>
                                            <th>Ignore If Matching Audio Track</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Language ID cutoff (ignore others if existing)
                                </div>
                                <div class="col-sm-8">
                                    <select class="selectpicker show-tick inline_select_edit" id="edit_language_cutoff" name="edit_language_cutoff">

                                    </select>
                                </div>
                            </div>
                            <input type="hidden" id="edit_profile_id" value="" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="edit_save_button" class="btn btn-info">Edit</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            getLanguages();

            // Show warning if there's unsaved changes in the settings_form
            var form_changed = false;
            $(window).on('beforeunload', function() {
                if (form_changed) {
                    return "";
                }
            });

            // Hide checkmark over save button
            $('#save_button_checkmark').hide();
            $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');

            // Set Select input values
            $('#settings-general-serie_default_profile').val('{{settings.general.serie_default_profile}}').trigger('change');
            $('#settings-general-movie_default_profile').val('{{settings.general.movie_default_profile}}').trigger('change');
            $('.selectpicker').selectpicker('refresh')

            // Set Checkbox input values
            $('#settings-general-single_language').prop('checked', {{'true' if settings.general.getboolean('single_language') else 'false'}}).trigger('change');
            $('#settings-general-serie_default_enabled').prop('checked', {{'true' if settings.general.getboolean('serie_default_enabled') else 'false'}}).trigger('change');
            $('#settings-general-movie_default_enabled').prop('checked', {{'true' if settings.general.getboolean('movie_default_enabled') else 'false'}}).trigger('change');

            var table = $('#languages_profiles').DataTable({
                dom: 'Bfrtip',
                select: {
                    style: 'single'
                },
                language: {
                    zeroRecords: 'No Languages Profiles'
                },
                searching: false,
                ordering: false,
                lengthChange: true,
                responsive: false,
                paging: false,
                info: false,
                processing: true,
                serverSide: false,
                ajax: {
                    url: "{{ url_for('api.languagesprofiles') }}",
                    type: 'GET'
                },
                columns: [
                    { data: 'profileId',
                        visible: false
                    },
                    { data: 'name' },
                    { data: 'cutoff',
                        visible: false
                    },
                    { data: 'items',
                        render: function(data, type, row) {
                            var languages = '';
                            $(eval(data)).each(function (index, value) {
                                if (value.forced == 'True') {
                                    languages += '<span class="badge badge-secondary"' + ((row.cutoff == '65535' || value.id == row.cutoff) ? ' data-toggle="tooltip" title="Ignore others if this one is available" style="background-color:#911f93;"' : '') + '>' + value.language + ':forced' + ((value.audio_exclude === "True") ? ' <i class="fa fa-ban" data-toggle="tooltip" title="Ignore if matching audio track available"></i>' : '') + '</span> ';
                                } else if (value.hi == 'True') {
                                    languages += '<span class="badge badge-secondary"' + ((row.cutoff == '65535' || value.id == row.cutoff) ? ' data-toggle="tooltip" title="Ignore others if this one is available" style="background-color:#911f93;"' : '') + '>' + value.language + ':hi' + ((value.audio_exclude === "True") ? ' <i class="fa fa-ban" data-toggle="tooltip" title="Ignore if matching audio track available"></i>' : '') + '</span> ';
                                } else {
                                    languages += '<span class="badge badge-secondary"' + ((row.cutoff == '65535' || value.id == row.cutoff) ? ' data-toggle="tooltip" title="Ignore others if this one is available" style="background-color:#911f93;"' : '') + '>' + value.language + ((value.audio_exclude === "True") ? ' <i class="fa fa-ban" data-toggle="tooltip" title="Ignore if matching audio track available"></i>' : '') + '</span> ';
                                }
                            });
                            return languages;
                        }
                    }
                ],
                buttons: [{
                    text: 'Add',  className: 'btn btn-info text-white',
                    action: function () {
                        if ($('#add_languages_profiles').DataTable().rows().length) {
                            $('#add_languages_profiles').DataTable().clear();
                        }
                        $('#add_profile_name').val('');
                        $('#add_languages_profiles').DataTable().destroy();
                        var table_add = $('#add_languages_profiles').DataTable({
                            dom: 'Bfrtip',
                            select: {
                                style: 'single'
                            },
                            language: {
                                zeroRecords: 'No Languages In This Profile'
                            },
                            searching: false,
                            ordering: false,
                            lengthChange: false,
                            responsive: false,
                            paging: false,
                            info: false,
                            data: null,
                            columns: [
                                { data: 'id',
                                    visible: false
                                },
                                { data: 'id' },
                                { data: 'language',
                                    render: function (data) {
                                        var enabled_languages = Array();
                                        $('#enabled_languages option:selected').each(function(){
                                            enabled_languages.push([$(this).val(), $(this).text()]);
                                        });

                                        var html_dropdown = '<select class="selectpicker show-tick inline_select_add" data-width="fit">';
                                        for (i = 0; i < enabled_languages.length; i++) {
                                            html_dropdown += '<option value="' + enabled_languages[i][0] + '"' + ((data == enabled_languages[i][0]) ? ' selected="selected"' : '') + '>' + enabled_languages[i][1] + '</option>';
                                        }
                                        html_dropdown += '</select>';

                                        return html_dropdown;
                                    }
                                },
                                { data: 'forced',
                                    render: function(data) {
                                        return '<select class="selectpicker show-tick inline_select_add" data-width="fit"><option value="True"' + ((data === 'True') ? ' selected="selected"' : '') + '>True</option><option value="False"' + ((data === 'False') ? ' selected="selected"' : '') + '>False</option></select>';
                                    }
                                },
                                { data: 'hi',
                                    render: function(data) {
                                        return '<select class="selectpicker show-tick inline_select_add" data-width="fit"><option value="True"' + ((data === 'True') ? ' selected="selected"' : '') + '>True</option><option value="False"' + ((data === 'False') ? ' selected="selected"' : '') + '>False</option></select>';
                                    }
                                },
                                { data: 'audio_exclude',
                                    render: function(data) {
                                        return '<select class="selectpicker show-tick inline_select_add" data-width="fit"><option value="True"' + ((data === 'True') ? ' selected="selected"' : '') + '>True</option><option value="False"' + ((data === 'False') ? ' selected="selected"' : '') + '>False</option></select>';
                                    }
                                }
                            ],
                            buttons: [{
                                text: 'Add', className: 'btn btn-info text-white',
                                action: function () {
                                    var language_id = 0;
                                    if (table_add.rows().data().toArray().length) {
                                        language_id = Math.max(...table_add.column(0).data().toArray());
                                    }
                                    language_id++;
                                    table_add.row.add({
                                        id: language_id,
                                        language: '',
                                        forced: 'False',
                                        hi: 'False',
                                        audio_exclude: 'False'
                                    }).draw();
                                    $('.inline_select_add').selectpicker('refresh');

                                    $('.inline_select_add.selectpicker').on('changed.bs.select', function () {
                                        table_add.row( $(this).closest('tr') ).cell( $(this).closest('td') ).data($(this).val());
                                        $('.inline_select_add').selectpicker('refresh');
                                        table_add.draw();
                                    });
                                }
                            },
                            {
                                extend: 'selected',
                                text: 'Delete', className: 'btn btn-info text-white',
                                action: function () {
                                    table_add.row( { selected: true } ).remove().draw();
                                }
                            }]
                        });
                        $('#addModal').modal('show');
                    }
                },
                {
                    extend: 'selected',
                    text: 'Edit', className: 'btn btn-info text-white',
                    action: function () {
                        $('#edit_profile_name').val(table.row( { selected: true } ).data()['name']);
                        var items = $.parseJSON(table.row( { selected: true } ).data()['items']);
                        $('#edit_languages_profiles').DataTable().destroy();
                        var table_edit = $('#edit_languages_profiles').DataTable({
                            dom: 'Bfrtip',
                            select: {
                                style: 'single'
                            },
                            language: {
                                zeroRecords: 'No Languages In This Profile'
                            },
                            searching: false,
                            ordering: false,
                            lengthChange: false,
                            responsive: false,
                            paging: false,
                            info: false,
                            data: items,
                            columns: [
                                { data: 'id',
                                    visible: false
                                },
                                { data: 'id' },
                                { data: 'language',
                                    render: function (data) {
                                        var enabled_languages = Array();
                                        $('#enabled_languages option:selected').each(function(){
                                            enabled_languages.push([$(this).val(), $(this).text()]);
                                        });

                                        var html_dropdown = '<select class="selectpicker show-tick inline_select_edit" data-width="fit">';
                                        for (i = 0; i < enabled_languages.length; i++) {
                                            html_dropdown += '<option value="' + enabled_languages[i][0] + '"' + ((data == enabled_languages[i][0]) ? ' selected="selected"' : '') + '>' + enabled_languages[i][1] + '</option>';
                                        }
                                        html_dropdown += '</select>'

                                        return html_dropdown;
                                    }
                                },
                                { data: 'forced',
                                    render: function(data) {
                                        return '<select class="selectpicker show-tick inline_select_edit" data-width="fit"><option value="True"' + ((data === 'True') ? ' selected="selected"' : '') + '>True</option><option value="False"' + ((data === 'False') ? ' selected="selected"' : '') + '>False</option></select>';
                                    }
                                },
                                { data: 'hi',
                                    render: function(data) {
                                        return '<select class="selectpicker show-tick inline_select_edit" data-width="fit"><option value="True"' + ((data === 'True') ? ' selected="selected"' : '') + '>True</option><option value="False"' + ((data === 'False') ? ' selected="selected"' : '') + '>False</option></select>';
                                    }
                                },
                                { data: 'audio_exclude',
                                    render: function(data) {
                                        return '<select class="selectpicker show-tick inline_select_edit" data-width="fit"><option value="True"' + ((data === 'True') ? ' selected="selected"' : '') + '>True</option><option value="False"' + ((data === 'False') ? ' selected="selected"' : '') + '>False</option></select>';
                                    }
                                }
                            ],
                            buttons: [{
                                text: 'Add', className: 'btn btn-info text-white',
                                action: function () {
                                    var language_id = 0;
                                    if (table_edit.rows().data().toArray().length) {
                                        language_id = Math.max(...table_edit.column(0).data().toArray());
                                    }
                                    language_id++;
                                    table_edit.row.add({
                                        id: language_id,
                                        language: '',
                                        forced: 'False',
                                        hi: 'False',
                                        audio_exclude: 'False'
                                    }).draw();
                                    $('.inline_select_edit').selectpicker('refresh');

                                    $('.inline_select_edit.selectpicker').on('changed.bs.select', function () {
                                        table_edit.row( $(this).closest('tr') ).cell( $(this).closest('td') ).data($(this).val());
                                        $('.inline_select_edit').selectpicker('refresh');
                                        table_edit.draw();
                                    });
                                }
                            },
                            {
                                extend: 'selected',
                                text: 'Delete', className: 'btn btn-info text-white',
                                action: function () {
                                    table_edit.row( { selected: true } ).remove().draw();
                                }
                            }]
                        });
                        $('#edit_language_cutoff').val(table.row( { selected: true } ).data()['cutoff']);
                        $('#edit_profile_id').val(table.row( { selected: true } ).data()['profileId']);
                        $('.inline_select_edit').selectpicker('refresh');
                        $('#editModal').modal('show');

                        $('.inline_select_edit.selectpicker').on('changed.bs.select', function () {
                            table_edit.row( $(this).closest('tr') ).cell( $(this).closest('td') ).data($(this).val());
                            $('.inline_select_edit').selectpicker('refresh');
                            table_edit.draw();
                        });
                    }
                },
                {
                    extend: 'selected',
                    text: 'Delete', className: 'btn btn-info text-white',
                    action: function () {
                        table.row( { selected: true } ).remove().draw();
                        $('#settings_form').trigger('change');
                    }
                }]
            });

             $('#add_profile_name').on('input', function() {
                 if ($('#add_languages_profiles').DataTable().rows().count() && $('#add_profile_name').val()) {
                    $('#add_save_button').prop('disabled', false).css('cursor', 'auto');
                } else {
                    $('#add_save_button').prop('disabled', true).css('cursor', 'not-allowed');
                }
             })

            $('#add_languages_profiles').DataTable().on( 'draw', function () {
                if ($('#add_languages_profiles').DataTable().rows().count() && $('#add_profile_name').val()) {
                    $('#add_save_button').prop('disabled', false).css('cursor', 'auto');
                } else {
                    $('#add_save_button').prop('disabled', true).css('cursor', 'not-allowed');
                }

                var previousValue = $("#add_language_cutoff").val();
                $("#add_language_cutoff").empty();
                $('#add_language_cutoff').append('<option value="">Disabled</option>');
                $('#add_language_cutoff').append('<option value="65535">Any of them</option>');

                var ids = $('#add_languages_profiles').DataTable().rows().data().pluck( 'id' ).toArray();
                $(ids).each( function(i, item) {
                    $('#add_language_cutoff').append('<option value="' + item + '">' + item + '</option>');
                });
                $("#add_language_cutoff").val(previousValue);
                $("#add_language_cutoff").selectpicker("refresh");
            } );

            $('#edit_profile_name').on('input', function() {
                 if ($('#edit_languages_profiles').DataTable().rows().count() && $('#edit_profile_name').val()) {
                    $('#edit_save_button').prop('disabled', false).css('cursor', 'auto');
                } else {
                    $('#edit_save_button').prop('disabled', true).css('cursor', 'not-allowed');
                }
             })

            $('#edit_languages_profiles').DataTable().on( 'draw', function () {
                if ($('#edit_languages_profiles').DataTable().rows().count() && $('#edit_profile_name').val()) {
                    $('#edit_save_button').prop('disabled', false).css('cursor', 'auto');
                } else {
                    $('#edit_save_button').prop('disabled', true).css('cursor', 'not-allowed');
                }

                var previousValue = $("#edit_language_cutoff").val();
                $("#edit_language_cutoff").empty();
                $('#edit_language_cutoff').append('<option value="">Disabled</option>');
                $('#edit_language_cutoff').append('<option value="65535">Any of them</option>');

                var ids = $('#edit_languages_profiles').DataTable().rows().data().pluck( 'id' ).toArray();
                $(ids).each( function(i, item) {
                    $('#edit_language_cutoff').append('<option value="' + item + '">' + item + '</option>');
                });
                $("#edit_language_cutoff").val(previousValue);
                $("#edit_language_cutoff").selectpicker("refresh");
            } );

            // Hide *_div on default-enabled change
            $('#settings-general-serie_default_enabled').on('change', function() {
                if ($(this).prop('checked')) {
                    $('#series_default_div').show();
                } else {
                    $('#series_default_div').hide();
                }
            });

            $('#settings-general-movie_default_enabled').on('change', function() {
                if ($(this).prop('checked')) {
                    $('#movies_default_div').show();
                } else {
                    $('#movies_default_div').hide();
                }
            });

            // Listen to profiles change and populate the default dropdowns accordingly
            $('#languages_profiles').DataTable().on( 'draw', function () {
                if ($("#settings-general-serie_default_profile").length > 1) {
                    var previousValueSerie = $("#settings-general-serie_default_profile").val();
                } else {
                    var previousValueSerie = '{{settings.general.serie_default_profile}}';
                }
                if ($("#settings-general-movie_default_profile").length > 1) {
                    var previousValueMovie = $("#settings-general-movie_default_profile").val();
                } else {
                    var previousValueMovie = '{{settings.general.movie_default_profile}}';
                }

                $("#settings-general-serie_default_profile").empty();
                $("#settings-general-movie_default_profile").empty();
                $('#settings-general-serie_default_profile').append('<option value="">None</option>');
                $('#settings-general-movie_default_profile').append('<option value="">None</option>');

                var ids = $('#languages_profiles').DataTable().rows().data().toArray();
                $(ids).each( function(i, item) {
                    $('#settings-general-serie_default_profile').append('<option value="' + item.profileId + '">' + item.name + '</option>');
                    $('#settings-general-movie_default_profile').append('<option value="' + item.profileId + '">' + item.name + '</option>');
                });
                $("#settings-general-serie_default_profile").val(previousValueSerie);
                $("#settings-general-movie_default_profile").val(previousValueMovie);
                $("#settings-general-serie_default_profile").selectpicker("refresh");
                $("#settings-general-movie_default_profile").selectpicker("refresh");
            } );

            $('#save_button').on('click', function(e) {
                e.preventDefault();

                var formdata = new FormData(document.getElementById("settings_form"));

                // Make sure empty default languages select are send (bug in bootstrap-select)
                if (formdata.get('settings-general-serie_default_profile') == null) {
                    formdata.append('settings-general-serie_default_profile', null)
                }
                if (formdata.get('settings-general-movie_default_profile') == null) {
                    formdata.append('settings-general-movie_default_profile', null)
                }

                // Make sure all checkbox input are sent with true/false value
                $('input[type=checkbox]').each(function () {
                    formdata.set($(this).prop('id'), $(this).prop('checked'));
                });

                formdata.append('languages_profiles', JSON.stringify(table.rows().data().toArray()));

                $.ajax({
                    url: "{{ url_for('api.savesettings') }}",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    complete: function () {
                        $('#save_button_checkmark').show();
                        form_changed = false;
                        $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
                        setTimeout(
                            function()
                            {
                                $('#save_button_checkmark').hide();
                            }, 2000);
                    }
                });
            });

            $('#add_save_button').on('click', function(e) {
                e.preventDefault();
                var table_add = $('#add_languages_profiles').DataTable();
                var items = [];
                table_add.rows().every( function (row) {
                    var row_item = table_add.cells( row, '' ).render( 'display' );
                    var language = $(row_item[2]).filter('select').selectpicker().val();
                    var forced = $(row_item[3]).filter('select').val();
                    var hi = $(row_item[4]).filter('select').val();
                    var audio_exclude = $(row_item[5]).filter('select').val();
                    items.push({
                        id: row_item[1],
                        language: language,
                        forced: forced,
                        hi: hi,
                        audio_exclude: audio_exclude
                    });
                })

                if (table.rows().data().toArray().length === 0) {
                    var languages_profile_id = 0;
                } else {
                    var languages_profile_id = Math.max(...table.column(0).data().toArray());
                }
                languages_profile_id++
                table.row.add({
                    profileId: languages_profile_id,
                    name: $('#add_profile_name').val(),
                    cutoff: $('#add_language_cutoff').val(),
                    items: JSON.stringify(items)
                }).draw();
                $('#addModal').modal('hide');
                $('#settings_form').trigger('change');
            });

            $('#edit_save_button').on('click', function(e) {
                e.preventDefault();
                var table_edit = $('#edit_languages_profiles').DataTable();
                var items = [];
                table_edit.rows().every( function (row) {
                    var row_item = table_edit.cells( row, '' ).render( 'display' );
                    var language = $(row_item[2]).filter('select').selectpicker().val();
                    var forced = $(row_item[3]).filter('select').val();
                    var hi = $(row_item[4]).filter('select').val();
                    var audio_exclude = $(row_item[5]).filter('select').val();
                    items.push({
                        id: row_item[1],
                        language: language,
                        forced: forced,
                        hi: hi,
                        audio_exclude: audio_exclude
                    });
                })
                table.row( { selected: true } ).data({
                    profileId: parseInt($('#edit_profile_id').val()),
                    name: $('#edit_profile_name').val(),
                    cutoff: $('#edit_language_cutoff').val(),
                    items: JSON.stringify(items)
                }).draw();
                $('#editModal').modal('hide');
                $('#settings_form').trigger('change');
            });

            function getLanguages() {
                $.ajax({
                    url: "{{ url_for('api.languages') }}?enabled=false",
                    success: function (data) {
                        $('#enabled_languages').empty();
                        $.each(data, function (i, item) {
                            $('#enabled_languages').append('<option value="' + item.code2 + '"' + ((item.enabled) ? ' selected="selected"' : '') + '>' + item.name + '</option>');
                        });
                        $("#enabled_languages").selectpicker("refresh");
                    }
                });
            }

            // monitor changes to the settings_form
            $('#settings_form').on('change', function() {
                form_changed = true;
                $('#save_button').prop('disabled', false).css('cursor', 'auto');
            })
        });
    </script>
{% endblock tail %}