{% extends '_main.html' %}

{% block title %}Wanted (Series) - Bazarr{% endblock %}

{% block bcleft %}
    <button class="btn btn-outline" id="search_button">
        <div><i class="fas fa-search align-top text-themecolor text-center font-20" aria-hidden="true"></i></div>
        <div class="align-bottom text-themecolor small text-center">Search All</div>
    </button>
{% endblock bcleft %}

{% block bcright %}

{% endblock bcright %}

{% block body %}
    <table id="wanted_series" class="table table-striped" style="width:100%">
        <thead>
        <tr>
            <th>Series</th>
            <th>Episode</th>
            <th>Episode Title</th>
            <th>Missing Subtitle(s)</th>
        </tr>
        </thead>
    </table>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            var table = $('#wanted_series').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    zeroRecords: 'No Missing Series Subtitles',
                    processing: "Loading Missing Series Subtitles..."
                },
                searching: false,
                ordering: false,
                lengthChange: false,
                responsive: true,
                pageLength: {{ settings.general.page_size }},
                ajax: "{{ url_for('api.wantedseries') }}",
                columns: [
                    {
                        data: null,
                        render: function (data) {
                            return '<a href="' + "{{ url_for( 'episodes', no='tempvalue' ) }}".replace("tempvalue", data.sonarrSeriesId) + '">' + data.seriesTitle + '</a>';
                        }
                    },
                    {data: "episode_number"},
                    {data: "episodeTitle"},
                    {
                        data: null,
                        render: function (data) {
                            if (data.missing_subtitles !== 'None') {
                                var languages = '';
                                data.missing_subtitles.forEach(appendFunc);
                                return languages;
                            } else {
                                return null;
                            }

                            function appendFunc(value) {
                                if (value.forced) {
                        			var advtag = ':forced';
								} else if (value.hi) {
                        			var advtag = ':HI';
								} else {
                        			var advtag = '';
								}

                                languages = languages + '<a href="" class="get_subtitle badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value.name + advtag + '" data-episodepath="' + data.mapped_path + '" data-scenename="' + data.scene_name + '" data-seriestitle="' + data.seriesTitle + '" data-language="' + value.code3 + '" data-hi="' + data.hearing_impaired + '" data-forced="' + value.forced + '" data-sonarrseriesid=' + data.sonarrSeriesId + ' data-sonarrepisodeid=' + data.sonarrEpisodeId + '>' + value.code2 + advtag + ' <i class="fas fa-search"></i></a> ';
                            }
                        }
                    }
                ]
            });

            $('#search_button').on('click', function (e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ url_for('api.searchwantedseries') }}",
                    type: 'GET',
                    beforeSend: function () {
                        $('#search_button').find("i").addClass('fa-spin');
                    },
                    complete: function () {
                        $('#search_button').find("i").removeClass('fa-spin');
                    }
                });
            });

            $('#wanted_series').on('click', '.get_subtitle', function (e) {
                $(this).tooltip('dispose');
                e.preventDefault();
                const values = {
                    episodePath: $(this).attr("data-episodepath"),
                    sceneName: $(this).attr("data-scenename"),
                    language: $(this).attr("data-language"),
                    hi: $(this).attr("data-hi"),
                    forced: $(this).attr("data-forced"),
                    sonarrSeriesId: $(this).attr("data-sonarrseriesid"),
                    sonarrEpisodeId: $(this).attr('data-sonarrepisodeid'),
                    title: $(this).attr("data-seriestitle")
                };
                var cell = $(this).parent();
                $.ajax({
                    url: "{{ url_for('api.episodessubtitlesdownload') }}",
                    type: "POST",
                    dataType: "json",
                    data: values,
                    beforeSend: function () {
                        cell.html('<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>');
                    }
                });
            });

            events.on('event', function (event) {
                var event_json = JSON.parse(event);
                if (event_json.type === 'episode') {
                    $('#wanted_series').DataTable().ajax.reload(resetPaging = false);
                    $('[data-toggle="tooltip"]').tooltip({html: true});
                }
            });
        });
    </script>
{% endblock tail %}