{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-users"></i>{{ 'screen.manage.title'|trans }}</h1>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <table class="style-light jump mt-1">
            <thead>
                <tr>
                    <th>{{ 'screen.manage.column.screen'|trans }}</th>
                    <th>{{ 'screen.manage.column.filter'|trans }}</th>
                </tr>
            </thead>
            <tbody>
                {% for code, screen in screen_list %}
                    <tr>
                        <td>{{ screen.label }}</td>
                        <td>
                            <select class="mb-0-5 mt-0-5 screen_select" name="{{ screen.label|replace({'.': '_'}) }}_select" id="{{ screen.label|replace({'.': '_'}) }}_select">
                                <option value="reset_{{ code }}" {% if screen.filters|length < 1 %}selected{% endif %}>{{ 'screen.select.option.reset'|trans }}</option>
                                {% for filter in screen.filters %}
                                    <option value="{{ filter.id }}" {% if filter.isDefault %}selected{% endif %}>{{ filter.name }}</option>
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){

            $('.screen_select').change(function () {
                let url = '';
                let value = $(this).val();
                if (value.includes('reset_')) {
                    value = value.replace('reset_', '');
                    url = "{{ url('app_screen_manage_reset_default_screen', {'screen_code' : '__00__'}) }}";
                    url = url.replace('__00__', value);
                } else {
                    url = "{{ url('app_screen_manage_set_default_screen', {'screen' : '__00__'}) }}";
                    url = url.replace('__00__', value);
                }

                $.ajax({
                    method: "POST",
                    url: url,
                    data: {token:"{{ csrf_token('app_screen_manage_set_default_screen') }}"},
                    success: function (response) {
                        if (response.status === "success" && response.hasOwnProperty('screen_name') ){
                            if (response.hasOwnProperty('reset_screen') && eval(response.reset_screen)){
                                toastr_success.success(response.screen_name+" "+"{{ 'screen.manage.resetDefault.success'|trans({}, 'flash') }}");
                            } else {
                                toastr_success.success(response.screen_name+" "+"{{ 'screen.manage.setDefalut.success'|trans({}, 'flash') }}");
                            }
                        } else {
                            toastr_success.error("{{ 'screen.manage.setDefalut.error'|trans({}, 'flash') }}");
                        }
                    }
                });
            });
        });
        </script>
{% endblock %}