{% extends 'admin\\baseadmin.html.twig' %}
{% block content%}
				<!--START PAGE CONTENT -->
				<section class="page-content container-fluid">
                    <div class="row">
                        <div class="col-lg-12 col-xl-12">
                            <div class="card">
                                <div class="card-header">
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-expand"><i class="icon dripicons-expand-2"></i></a></li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered datatable-init" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th style="width:30px" class="no-sort tableactions"><input class="js-dataTableCB" type="checkbox" value="all"></th>
                                                    <th>{{'domain'|trans({},'domains')}}</th>
                                                    <th style="width:150px">{{'languages'|trans({},'studio')}}</th>
                                                    <th style="width:100px">{{'status'|trans({},'domains')}}</th>
                                                    <th style="width:100px" class="no-sort tableactions" width>{{'actions'|trans({},'studio')}}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
{% include '/components/deleteModal.html.twig' with { 
    'url': path('domains_delete'),
    'title': "delete"|trans({},"studio"),
    'body': "delete_msg"|trans({},"studio"),
    'btCancel': "cancel"|trans({},"studio"),
    'btConfirm': "confirm"|trans({},"studio")
    } %}

{% endblock %}
{% block javascripts %}
{{parent()}}
    <script>
        {% include '/components/deleteModal.js.twig' %}
        var config={
            processing: true,
            serverSide: true,
            stateSave: true,
            stateDuration: -1,
            ajax: "{{path('admin_domains')}}",
            
            language: {
                "sEmptyTable": "{{'emptytable'|trans({},'studio')}}",
                "sLoadingRecords": "{{'loadingrecords'|trans({},'studio')}}",
                "sProcessing": "{{'processing'|trans({},'studio')}}",
                "sLengthMenu": "{{'showmenulength'|trans({},'studio')}}",
                "sZeroRecords":  "{{'zerorecords'|trans({},'studio')}}",
                "sSearch": "{{'searchlabel'|trans({},'studio')}}",
                "sInfo":   "{{'infostart'|trans({},'studio')}}",
                "sInfoFiltered": "{{'infofiltered'|trans({},'studio')}}",
                "sInfoEmpty":    "{{'infoempty'|trans({},'studio')}}",
                "oPaginate": {
                    "sFirst":    "{{'first'|trans({},'studio')}}",
                    "sPrevious": "{{'previous'|trans({},'studio')}}",
                    "sNext":     "{{'next'|trans({},'studio')}}",
                    "sLast":     "{{'last'|trans({},'studio')}}"
                },
            },
            columns: [
                { data: 'id', "orderable": false, render: (data,type,row,meta) => {
                    if(row.deletable)
                    {
                        return '<input style="margin:auto;" class="form-check-input js-dataTableCB" type="checkbox" value="'+data+'" name="ids[]" >';
                    }
                    else
                    {
                        return '';
                    }
                }},
                { data: 'domain', "orderable": true },
                { data: 'langs', "orderable": false, render: (data,type,row,meta) => {
                    let html = '';
                    data.forEach((item) => {
                        let classe;
                        if(item.isTranslated){
                            classe = "badge badge-pill badge-success";
                        }else{
                            classe = "badge badge-pill badge-secondary";
                        }
                        html += '<span style="margin-left:3px;" class="'+classe+'">'+item.languageCode.toUpperCase()+'</span>'
                    });
                    return html;
                } },
                { data: 'status', "orderable": false },
                { data: 'actions', "orderable": false,
                  render: function (data,type,row,meta){
                      var result='';
                      jQuery.each(data,function(index,item){
                          switch (item.type){
                              case "edit":
                                cssclass='edit';
                                result+='<a href="'+item.url+'"><i class="la la-'+cssclass+'"></i></a>'
                                break;
                            case "copy":
                                cssclass='list';
                                result+='<a href="'+item.url+'"><i class="la la-'+cssclass+'"></i></a>'
                                break;
                              case "delete":
                                 if (row.deletable)
                                 {
                                     cssclass='trash';
                                     result+='<a href="#" onclick="toogleDeleteModal(\''+item.id+'\');return false;"><i class="la la-'+cssclass+'"></i></a>'
                                 }
                                break;
                          }
                      });
                      return result;
                  } }
            ],
            "order": [[ 1, "desc" ]],
            "initComplete": () => {
                $('.js-dataTableCB').on('change',(e) => {
                    handleCheckBoxChange(e);
                });
            },
            columnDefs: [
                {
                   className: "tableactions", 
                    "targets": [ "tableactions" ],
                    orderable:false,
                    "targets": [ "tableactions" ],
                    
                }
               
            ]
        };

    </script>
{% endblock %}