<!--
    Block of COMMON components -
    - components for ALL view types
-->
<!-- Base template of View (<router-view></router-view>) of ANY type -->
<script type="text/x-template" id="template_view_entity">
    <div style="display:contents;" >

        <preloader :show="loading"></preloader>

        <div class="content-wrapper-2" v-if="error">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <h1>
                        <span @click="goToHistoryRecord(-1)" class="btn btn-default btn-previous-page">
                            <span class="fa fa-arrow-left"></span>
                        </span>
                                <span class="h1-header" > Error {{ error.status }} </span>
                            </h1>
                        </div>
                        <div class="col-lg-6">
                            <breadcrumbs :breadcrumbs="breadcrumbs"></breadcrumbs>
                        </div>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="error-text-wrapper">
                                <p class="text-center error-p">{{ error_data }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="content-wrapper-2" v-if="response">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <h1>
                                <span @click="goToHistoryRecord(-1)" class="btn btn-default btn-previous-page">
                                    <span class="fa fa-arrow-left"></span>
                                </span>
                                <span class="h1-header" > {{ title  | capitalize | split }} </span>
                            </h1>
                        </div>
                        <div class="col-lg-6" >
                            <breadcrumbs :breadcrumbs="breadcrumbs"></breadcrumbs>
                        </div>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12 buttons-row-wrapper">
                            <gui_buttons_row :view="view" :data="data" :opt="opt"></gui_buttons_row>
                        </div>
                    </div>
                    <div class="row">
                        <section class="col-lg-12">
                            <template v-if="view.schema.type == 'list'">
                                <component :is="content_body_component" :data="data" :view="view" :opt="opt"></component>
                                <template v-if="multi_actions_button_component">
                                    <component :is="multi_actions_button_component" :data="data" :view="view" :opt="opt"></component>
                                </template>
                            </template>
                            <template v-else>
                                <div class="card card-info">
                                    <div class="card-header with-border card-header-custom">
                                        <component :is="content_header_component" :data="data" :view="view" :opt="opt"></component>
                                            <button type="button" class="btn btn-card-tool btn-sm btn-light btn-icon btn-right"
                                                    @click="toggleCardCollapsed" aria-label="toggle" v-if="card_collapsed_button"
                                            >
                                                <i class="fa" :class="card_collapsed ? 'fa-plus' : 'fa-minus'"></i>
                                            </button>
                                    </div>
                                    <transition name="fade">
                                        <div class="card-body card-body-custom" :class="'card-body-' + view.schema.type" v-show="!card_collapsed">
                                            <component :is="content_body_component" :data="data" :view="view" :opt="opt"></component>
                                        </div>
                                    </transition>
                                    <transition name="fade">
                                        <div class="card-footer clearfix" v-if="content_footer_component && !card_collapsed">
                                            <component :is="content_footer_component" :data="data" :view="view" :opt="opt"></component>
                                        </div>
                                    </transition>
                                </div>
                                <component :is="content_additional" :data="data" :view="view" :opt="opt" v-if="content_additional"></component>
                            </template>
                        </section>
                    </div>
                </div>
            </section>
        </div>
    </div>
</script>

<!-- template of preloader (Vue component - '<preloader></preloader>') -->
<script type="text/x-template" id="template_preloader">
    <div class="in-loading" v-if="show">
        <div class="loader-wrapper">
            <div class="loader"></div>
        </div>
    </div>
</script>

<!-- template of breadcrumbs (Vue component - '<breadcrumbs></breadcrumbs>') -->
<script type="text/x-template" id="template_breadcrumbs">
    <ol class="breadcrumb float-sm-right">
        <li
                v-for="breadcrumb in breadcrumbs"
                class="breadcrumb-item"
                :class="{'active': !breadcrumb.link}"
        >
            <template v-if="breadcrumb.link">
                <router-link :to="breadcrumb.link">
                    {{ breadcrumb.name }}
                </router-link>
            </template>
            <template v-else>
                {{ breadcrumb.name }}
            </template>
        </li>
    </ol>
</script>

<!-- template of top menu/navigation -->
<script type="text/x-template" id="template_top_nav">
    <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
        <ul class="navbar-nav">
            <li class="nav-item">
                <span class="nav-link" onclick="saveHideMenuSettings()" data-widget="pushmenu">
                    <i class="fa fa-bars  ico-data-default"></i>
                </span>
            </li>
            <template v-if="is_authenticated">
                <li class="nav-item for-web api-link" >
                    <a :href="openapi_url" class="nav-link">
                        <i class="fa fa-star ico-data-default"></i> <span class="text-data">API</span>
                    </a>
                </li>
            </template>
            <template v-else>
                <li class="nav-item for-web login-link">
                    <a class="nav-link" :href="login_url">
                        <i class="fa fa-sign-out text-data"></i>
                        <span>Login</span>
                    </a>
                </li>
            </template>
        </ul>

        <template v-if="is_authenticated">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" href="#">
                        <template v-if="enable_gravatar">
                            <img :src="gravatar_img" class="img-circle elevation-1 gravatar-img"
                                 @error="setDefaultGravatar($event.target)" alt="User gravatar"
                            >
                        </template>
                        <template v-else>
                            <i class="fa fa-user mr-2 ico-data-default"></i>
                        </template>
                        <span class="text-data hidden-480">
                            {{user.first_name | capitalize}} {{user.last_name | capitalize}}
                        </span>
                    </a>

                    <div class="dropdown-menu dropdown-menu-xs dropdown-menu-right profile-menu background-default">
                        <component :is="link_component" :[link_attr]="profile_url" class="dropdown-item text-data">
                            <i class="fa fa-id-card-o mr-2 ico-data-default"></i> Profile
                        </component>

                        <div class="dropdown-divider"></div>

                        <component :is="link_component" :[link_attr]="profile_settings_url" class="dropdown-item text-data">
                            <i class="fa fa-cogs mr-2 ico-data-default"></i> Settings
                        </component>

                        <div class="dropdown-divider for-web"></div>

                        <a :href="logout_url" class="dropdown-item for-web text-data">
                            <i class="fa fa-sign-out mr-2 ico-data-default"></i> Logout
                        </a>
                    </div>
                </li>
                <li class="nav-item">
                    <span class="nav-link" data-widget="control-sidebar" data-slide="true">
                        <i class="fa fa-th-large ico-data-default"></i>
                    </span>
                </li>
            </ul>
        </template>
    </nav>
</script>

<!-- template of logo (Vue component - '<logo></logo>' -->
<script type="text/x-template" id="template_logo">
    <a href="/" class="logo-link nav-link brand-link logo">
        <i class="nav-icon fa fa-globe mr-2" style="margin-left: 20px;"></i>
        <span class="brand-text font-weight-light">{{ title | capitalize }}</span>
    </a>
</script>

<!-- template of sidebar (Vue component - '<sidebar></sidebar>') -->
<script type="text/x-template" id="template_sidebar">
    <div class="sidebar">
        <nav class="mt-2 ">
            <ul class="nav nav-pills nav-sidebar flex-column" >
                <template v-for="item in menu_items">
                    <sidebar_link_wrapper :item="item" @hideSidebar="hideSidebar"></sidebar_link_wrapper>
                </template>
            </ul>
        </nav>
    </div>
</script>

<!-- template of sidebar link -->
<script type="text/x-template" id="template_sidebar_link">
    <component :is="link_type" :[link_url_attr]="link_url" class="nav-link" :class="link_classes" rel="noreferrer"
               @click="onLinkClickHandler" @click.native="onLinkClickHandler">
        <i class="nav-icon ico-menu" :class="icon_classes"></i>
        <p>
            <span class="li-header-span">
                <i class="li-header-span-i-none menu-text-data">{{ item.name | capitalize }}</i>
            </span>
            <template v-if="item.sublinks">
                <i class="right fa fa-angle-left ico-menu" @click.stop.prevent="onToggleIconClickHandler"></i>
            </template>
        </p>
    </component>
</script>

<!-- template of sidebar link with wrapper -->
<script type="text/x-template" id="template_sidebar_link2">
    <li class="nav-item" :class="wrapper_classes" :data-url="item.url">
        <sidebar_link :item="item" @toggleMenuOpen="toggleMenuOpen" @hideSidebar="hideSidebar"></sidebar_link>
        <template v-if="item.sublinks">
            <ul class="menu-treeview-menu nav nav-treeview" >
                <template v-for="subitem in item.sublinks">
                    <li class="nav-item" :data-url="subitem.url">
                        <sidebar_link :item="subitem" @hideSidebar="hideSidebar"></sidebar_link>
                    </li>
                </template>
            </ul>
        </template>
    </li>
</script>

<!-- template of main footer -->
<script type="text/x-template" id="template_main_footer">
    <footer class="main-footer">
        <gui_help_modal></gui_help_modal>

        <slot name="footer_buttons"></slot>

        <div class="pull-right d-none d-sm-block" style="margin-right: 0px;">
            <b>Version</b> {{ project_version }}
        </div>

        <template v-if="is_debug">
            <div class="pull-right">
                <b>
                    <a href="#" class="help-text-data"
                       onclick="loadQUnitTests(); return false;" >Test qUnit</a>
                </b>
            </div>
        </template>

        <div class="pull-right">
            <a href="#" class="help-text-data"
               onclick="cleanCacheAndReloadPage(); return false;"
            >Reload cache</a>
        </div>
        <br>
    </footer>
</script>

<!-- template of buttons_row component (Vue component - '<gui_buttons_row></gui_buttons_row>' ) -->
<script type="text/x-template" id="template_buttons_row">
    <div>
        <template v-for="item in operations">
            <template v-if="item.component">
                <component :is="item.component" :options="item"></component>
            </template>
            <template v-else>
                <gui_button_common type="operation" :options="item" :look="{classes:['btn-primary']}"></gui_button_common>
            </template>
        </template>

        <gui_group_of_buttons type="sublink" title="sublinks" classes="btn-default" :buttons="sublinks"></gui_group_of_buttons>

        <gui_group_of_buttons type="action" title="actions" classes="btn-warning" :buttons="actions"></gui_group_of_buttons>

        <template v-if="view.schema.type == 'list'">
            <gui_filters_modal :opt="filters_opt" :view="view" :data="data"></gui_filters_modal>
            <pagination :options="data.pagination"></pagination>
        </template>
    </div>
</script>

<!-- template for buttons, that can be grouped on small screens in drop-down list (Actions, Sublinks on page view, for example)
     or can be represented as independent buttons on big screens
-->
<script type="text/x-template" id="template_group_of_buttons">
    <span>
            <template v-if="groupButtonsOrNot">
                <gui_buttons_list :buttons="buttons" :type="type" :text="title" :look="{classes: classes}"></gui_buttons_list>
            </template>
            <template v-else>
                <gui_button_common v-for="item in buttons" :type="type" :options="item" :look="{classes: classes}"></gui_button_common>
            </template>
        </span>
</script>

<!-- template of button with drop-down buttons list (button 'Actions' in table list row, for example) -->
<script type="text/x-template" id="template_buttons_list">
    <div class="btn-group" role="group">
        <button type="button" class="btn dropdown-toggle highlight-tr-none gui-btn" :class="classes"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" :aria-label="text">
            {{ text | capitalize }}
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
            <gui_button_li v-for="button in buttons" :type="type" :options="button" :instance_id="instance_id"></gui_button_li>
        </ul>
    </div>
</script>

<!-- template of multi-actions button with drop-down list -->
<script type="text/x-template" id="template_multi_actions">
    <div class="btn-group" role="group" v-show="selected">
        <button type="button" class="btn gui-btn dropdown-toggle highlight-tr-none" :class="classes"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" :aria-label="text">
            {{ text | capitalize | split }}
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
            <gui_button_li v-for="button in multi_actions" type="multi_action" :options="button" ></gui_button_li>
        </ul>
    </div>
</script>

<!-- template of independent button:
      - It can be link button(it has 'path' property in it's 'options'),
       that do redirect to another view.
      - It can be just button(it has no 'path' property in it's 'options'),
       that calls some method of root component.
-->
<script type="text/x-template" id="template_button_common">
    <button class="btn gui-btn" :class="classes" @click="onClickHandler" v-if="!options.hidden" :aria-label="title">
        <template v-if="icon_classes">
            <span :class="icon_classes"></span>
            <span :class="title_classes">{{ title | capitalize | split }}</span>
        </template>
        <template v-else>
            {{ title | capitalize | split }}
        </template>
    </button>
</script>

<!-- template of buttons from drop-down list of buttons. -->
<script type="text/x-template" id="template_button_li">
    <li class="dropdown-item" v-if="!options.hidden">
        <a class="sublink-btn highlight-tr-none" :class="class_with_name" @click="onClickHandler(instance_id)">
            {{ title | capitalize | split }}
        </a>
    </li>
</script>

<!-- template of modal window -->
<script type="text/x-template" id="template_modal">
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <div class="modal-header text-data" v-if="with_header">
                        <slot name="header">
                            default header
                        </slot>
                        <span @click="close" class="btn-modal-header-close">
                                 <i class="fa fa-times"></i>
                        </span>
                    </div>

                    <div class="modal-body text-data">
                        <slot name="body">
                        </slot>
                    </div>

                    <div class="modal-footer text-data" v-if="with_footer">
                        <slot name="footer">
                            default footer
                            <button class="modal-default-button" @click="$emit('close')" aria-label="OK">
                                OK
                            </button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</script>

<!-- template of help modal window -->
<script type="text/x-template" id="template_help_modal">
    <div style="display: inline-block;">
        <gui_modal v-show="show_modal" @close="close" :opt="{footer:false}">
            <template v-slot:header>
                <h3>{{ info.title }}</h3>
            </template>
            <template v-slot:body>
                <h4 class="with_bottom_border">Versions</h4>
                <ul>
                    <li v-for="(item, index) in info['x-versions']">
                        <b>{{index}}:</b> {{item}}
                    </li>
                </ul>
                <template v-for="(item, index) in info['x-links']">
                    <h4 class="with_bottom_border" style="margin-top:20px;">{{index}}</h4>
                    <ul>
                        <template v-if="isArray(item)">
                            <li v-for="prop in item">
                                <a :href="prop.url" target="_blank" rel="noreferrer">{{prop.name}}</a>
                            </li>
                        </template>
                        <template v-else>
                            <li>
                                <a :href="item.url" target="_blank" rel="noreferrer">{{item.name}}</a>
                            </li>
                        </template>
                    </ul>
                </template>
            </template>
        </gui_modal>
        <a href="#" @click.stop.prevent="open" class="help-text-data">
            <span class="fa fa-question-circle"></span> About
        </a>
    </div>
</script>

<!-- template of gui_customizer -->
<script type="text/x-template" id="template_gui_customizer">
    <div class="p-3 customizer-options">
        <h5>Customize application styles</h5>
        <hr class="mb-2">
        <field_choices :field="skinField" :wrapper_opt="{use_prop_data: true}"
                       :prop_data="{skin_name: skin_name}"
                       @setValueInStore="skinOnChangeHandler"
        >
        </field_choices>
        <hr class="mb-2">
        <div class='customize-skin-options' >
            <field_form :field="formField" :wrapper_opt="{use_prop_data: true}"
                        :prop_data="{skin_settings: skin_settings}"
                        @setValueInStore="formOnChangeHandler"
            >
            </field_form>
        </div>
    </div>
</script>
<!--
    EndBlock of COMMON components -
    - components for ALL view types
-->


<!--
   Block of LIST components -
   - components for LIST views
-->
<!-- Base template of content_component (Vue component - <gui_entity_list></gui_entity_list>) of view with 'list' type -->
<script type="text/x-template" id="template_entity_list">
    <div class="list-content-component">
        <template v-if="is_empty">
            <p class="text-center empty-list-p">List is empty.</p>
        </template>
        <template v-else>
            <gui_list_table :instances="data.instances" :fields="fields" :view="view" :opt="opt"></gui_list_table>
        </template>
    </div>
</script>

<!-- Base template of content_component_footer (Vue component - <gui_entity_footer_list></gui_entity_footer_list>) of view with 'list' type -->
<script type="text/x-template" id="template_entity_footer_list">
    <div class="list-footer-btns-wrapper">
        <gui_multi_actions :instances="data.instances" :multi_actions="schema.multi_actions" :opt="opt" v-if="multi_actions_exist"></gui_multi_actions>
        <pagination :options="data.pagination"></pagination>
    </div>
</script>

<!-- Component for a modal window with filter fields -->
<script type="text/x-template" id="template_filters_modal">
    <div style="display: inline-block;">
        <gui_modal v-show="show_modal" @close="close">
            <template v-slot:header>
                <h3>Filters</h3>
            </template>
            <template v-slot:body>
                <filters_wrapper :opt="opt" :view="view" :filters_data="data.filters"></filters_wrapper>
            </template>
            <template v-slot:footer>
                <button class="btn btn-default btn-close-filters-modal" @click="close" aria-label="Cancel">Cancel</button>
                <button class="btn btn-primary btn-apply-filters" @click="filter" aria-label="Filter">Filter</button>
            </template>
        </gui_modal>
        <button class="btn gui-btn btn-default btn-open-filters-modal" @click="open" aria-label="Filters">
            <i class="fa fa-sliders" aria-hidden="true"></i>
            <span class="d-none d-lg-inline-block title-for-btn">Filters</span>
        </button>
    </div>
</script>

<!-- template for Vue component - <filters_wrapper></filters_wrapper> -
    container for list view filters
-->
<script type="text/x-template" id="template_filters_wrapper">
    <div class="container-fluid">
        <div class="row">
            <div
                    v-for="field in filters"
                    :field="field"
                    :is="'field_' + field.options.format"
                    v-model="data_to_represent[field.options.name]"
                    v-if="!(opt.hideReadOnly && field.options.readOnly)"
                    :wrapper_opt="wrapper_opt"
            ></div>
        </div>
    </div>
</script>


<!-- template of <gui_list_table></gui_list_table> component -->
<script type="text/x-template" id="template_list_table">
    <table class="table table-bordered table-bordered-custom multiple-select">
        <thead>
        <tr :class="classes">
            <th style="width: 50px" @click="changeAllRowsSelection" class="global-select td_select_btn" v-if="multi_actions_exist">
                <div class="ico-on fa fa-toggle-on"></div>
                <div class="ico-off fa  fa-toggle-off"></div>
            </th>

            <th v-for="field in fields" v-if="!hideField(field)" :class="td_classes('td', field.options.name)">
                {{ field.options.title || field.options.name | capitalize | split }}
            </th>

            <th style="width: 60px;" :class="td_classes('column', 'actions')" v-if="child_actions_exist"></th>
        </tr>
        </thead>
        <tbody>
        <gui_list_table_row v-for="instance in instances" :instance="instance" :fields="fields" :view="view" :opt="opt"></gui_list_table_row>
        </tbody>
    </table>
</script>

<!-- template of <gui_list_table_row></gui_list_table_row> component -->
<script type="text/x-template" id="template_list_table_row">
    <tr class="item-row item-row-id highlight-tr" :class="classes" @click="goToTrLink($event)" @mousedown="onMouseDownHandler"
        :data-id="instance.getPkValue()" :data-href="base_url + '/' + instance.getPkValue()"
    >
        <td class="highlight-tr-none guiListSelections-toggle-btn td_select_btn"  @click="toggleSelection" v-if="multi_actions_exist">
            <div class="ico-on fa fa-toggle-on"></div>
            <div class="ico-off fa  fa-toggle-off"></div>
        </td>
        <td v-for="field in fields" v-if="!hideField(field)" :class="td_classes('td', field.options.name)">
            <component :is="'field_' + field.options.format"
                       :prop_data="data_to_represent"
                       :field="field"
                       :wrapper_opt="{list_view: true, use_prop_data: true}"
            ></component>
        </td>
        <td :class="td_classes('column', 'actions')" v-if="child_actions_exist" style="text-align: center;">
            <div class="btn-group" role="group">
                <gui_buttons_list :instance_id="instance.getPkValue()" :buttons="child_links_buttons"
                                  type="child_link" text="" :look="{classes: ['btn-primary']}"
                ></gui_buttons_list>
            </div>
        </td>
    </tr>
</script>

<!-- template of <pagination></pagination> component  -->
<script type="text/x-template" id="template_pagination">
    <ul class="pagination pagination-sm no-margin pull-right" v-if="pages_amount > 1">
        <li class="page-item pagination-page" v-for="item in items">
            <a class="page-link" :style="styles(item.number)"  @click.stop.prevent="goToPage(item.number)">{{ item.text }}</a>
        </li>
    </ul>
</script>

<!-- template of add child to list modal window -->
<script type="text/x-template" id="template_add_child_modal">
    <!--<div style="display: contents;">-->
    <div style="display: inline-block;">
        <preloader :show="show_loader"></preloader>

        <gui_modal v-show="show_modal" @close="close">
            <template v-slot:header>
                <h3>Add child instances</h3>
            </template>
            <template v-slot:body>
                <current_search_input :field_props="field_props" @filterQuerySetItems="filterQuerySetItems">
                </current_search_input>
                <current_pagination :options="data.pagination" @goToPage="goToPage"></current_pagination>
                <template v-if="is_empty">
                    <p class="text-center">List is empty.</p>
                </template>
                <template v-else>
                    <current_table :instances="instances" :opt="opt" @changeValue="changeValue" @setSelections="setSelections" @toggleSelection="toggleSelection">
                    </current_table>
                </template>
            </template>
            <template v-slot:footer>
                <button class="btn btn-default btn-operation-add-child-close" @click="close" aria-label="Cancel">Cancel</button>
                <button class="btn btn-primary btn-operation-add-child-apply" @click="addSelected" aria-label="Add selected">Add selected</button>
            </template>
        </gui_modal>
        <button class="btn btn-primary btn-operation-add" @click="open" aria-label="Add">
            <span class="fa fa-folder-open"></span>
            <span class="d-none d-lg-inline-block title-for-btn">Add</span>
        </button>
    </div>
</script>

<!-- template of modal window table -->
<script type="text/x-template" id="template_base_instances_list_table">
    <table class="table table-bordered" :class="table_classes">
        <thead>
        <tr :class="header_tr_classes">
            <th style="width: 50px" @click="changeAllRowsSelection" class="global-select td_select_btn" v-if="with_multiple_select">
                <div class="ico-on fa fa-toggle-on"></div>
                <div class="ico-off fa  fa-toggle-off"></div>
            </th>

            <th v-for="field in fields" v-if="!hideField(field)" :class="td_classes('td', field.options.name)">
                {{ field.options.title || field.options.name | capitalize | split }}
            </th>

            <th style="width: 120px;" :class="td_classes('column', 'actions')" v-if="with_actions">Actions</th>
        </tr>
        </thead>
        <tbody>
        <current_table_row v-for="instance in instances"
                           :instance="instance" :opt="row_opt(instance)"
                           @toggleSelection="toggleSelection"
        ></current_table_row>
        </tbody>
    </table>
</script>

<!-- template of modal window table row -->
<script type="text/x-template" id="template_base_instances_list_table_row">
    <tr class="item-row item-row-id highlight-tr" :class="tr_classes"
        @click="goToTrLink($event, _blank)" @mousedown="onMouseDownHandler" :data-id="instance.getPkValue()"
        :data-href="base_url + '/' + instance.getPkValue()"
    >
        <td class="highlight-tr-none guiListSelections-toggle-btn td_select_btn"
            @click="toggleSelection" v-if="with_select"
        >
            <div class="ico-on fa fa-toggle-on"></div>
            <div class="ico-off fa  fa-toggle-off"></div>
        </td>
        <td v-for="field in fields" v-if="!hideField(field)"
            :class="td_classes('td', field.options.name)"
        >
            <component :is="'field_' + field.options.format"
                       :prop_data="data_to_represent"
                       :field="field"
                       :wrapper_opt="{list_view: true, use_prop_data: true}"
            ></component>
        </td>
        <td :class="td_classes('column', 'actions')" v-if="with_actions">
            <div class="btn-group" role="group">
                <gui_buttons_list
                        type="child_link"
                        :instance_id="instance.getPkValue()"
                        :buttons="child_links_buttons" text="actions"
                        :look="{classes: ['btn-primary']}">
                </gui_buttons_list>
            </div>
        </td>
    </tr>
</script>
<!--
   EndBlock of LIST components -
   - components for LIST views
-->


<!--
   Block of PAGE components -
     - components for PAGE views (page, page_new, page_edit, action)
-->
<!-- Base template of content_component (Vue component - 'gui_entity_{page, page_new, page_edit, action}')
     of view with (page, page_new, page_edit, action) type
 -->
<script type="text/x-template" id="template_entity_page">
    <fields_wrapper :opt="options" :instance="instance"></fields_wrapper>
</script>

<!-- template for Vue component - <fields_wrapper></fields_wrapper> -
     container for guiFields on pages with ['page', 'page_new', 'page_edit', 'action'] type
-->
<script type="text/x-template" id="template_fields_wrapper">
    <div class="container-fluid fields-wrapper">
        <div class="row">
            <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6" v-if="show_fields_select">
                <label class="control-label">Add field</label>
                <select class="form-control" id="show_not_required_fields_select"
                        @change="addFieldHandler($event.target.value); $event.target.selectedIndex = 0; return false;"
                >
                    <option disabled selected >Select field</option>
                    <option v-for="field in fields" :value="field.options.name" :disabled="field.options.required">
                        {{ field.options.title  || field.options.name | capitalize | split }}
                    </option>
                </select>
            </div>

            <div
                    v-for="field in fields"
                    :field="field"
                    :is="'field_' + field.options.format"
                    v-if="!(opt.hideReadOnly && field.options.readOnly)"
                    :wrapper_opt="getFieldWrapperOpt(field)"
                    @toggleHidden="toggleHidden"
            ></div>
        </div>
    </div>
</script>

<!--
   EndBlock of PAGE components -
     - components for PAGE views (page, page_new, page_edit, action)
-->


<!--
  Block of CUSTOM pages -
    - home page, 404 page and so on
-->
<!-- base custom page template -->
<script type="text/x-template" id="template_custom_view">
    <div class="content-wrapper-2">
        <section class="content-header">
            <h1>
                <span @click="goToHistoryRecord(-1)" class="btn btn-default btn-previous-page">
                    <span class="fa fa-arrow-left"></span>
                </span>
                <span class="h1-header" > {{ title }} </span>
            </h1>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="error-text-wrapper">
                            <p class="text-center error-p"> {{ message }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</script>
<!--
   EndBlock of CUSTOM pages -
     - home page, 404 page and so on
-->

<!--
  Block of WIDGETS templates
-->
<!-- template of counter widget -->
<script type="text/x-template" id="template_w_counter">
    <div class="col-lg-2 col-6 dnd-block" v-if="item.active">
        <div class="small-box bg-info cursor-move1">
            <div class="inner">
                <transition name="slide-fade" mode="out-in">
                    <div :key="value">
                        <h3>{{ value }}&nbsp;</h3>
                    </div>
                </transition>
                <p>{{ item.title || item.name | capitalize }}</p>
            </div>
            <div class="icon hidden-xs" style="top: 0px;">
                <i class="fa fa-cog"></i>
            </div>
            <template v-if="item.url">
                <router-link :to="item.url" class="small-box-footer">
                    More info <i class="fa fa-arrow-circle-right"></i>
                </router-link>
            </template>
            <template v-else>
                <i  class="small-box-footer" >&nbsp;</i>
            </template>
        </div>
    </div>
</script>

<!-- template of line chart widget -->
<script type="text/x-template" id="template_w_line_chart">
    <div class="col-lg-12 col-12 dnd-block" v-if="item.active">
        <!--<div class="col-lg-12 col-12 dnd-block">-->
        <div class="card card-info">
            <div class="card-header ui-sortable-handle cursor-move1">
                {{ item.title || item.name | capitalize }}
                <div class="pull-right">
                    <button type="button" class="btn btn-card-tool btn-sm btn-light btn-icon"
                            @click="toggleCollapsed" aria-label="toggle"
                    >
                        <i class="fa " :class="item.collapsed ? 'fa-plus' : 'fa-minus'"></i>
                    </button>
                </div>

                <content_header :item="item" :value="value" v-if="with_content_header"></content_header>

            </div>
            <transition name="fade">
                <div class="card-body border-radius-none" v-if="!item.collapsed">
                    <content_body :item="item" :value="value"></content_body>
                </div>
            </transition>
        </div>
    </div>
</script>

<!-- template of line chart widget - content body -->
<script type="text/x-template" id="template_w_line_chart_content_body">
    <div class="row">
        <div class="col-lg-12">
            <div style="position: relative; margin: auto; height: 300px; width: 100%; overflow:hidden;">
                <canvas id="chart_js_canvas"></canvas>
            </div>
        </div>
    </div>
</script>
<!--
  EndBlock of WIDGETS templates
-->