<div>
    <cly-tabs id="basic-tabs" v-model="activeTab">
        <cly-content v-bind:name='"Table"' id="good-table-tab">
            <cly-panel title="DataTable" v-bind:date-selector="false">
                <template slot="right-top">
                    <cly-button v-tooltip="'Tooltip'" v-on:click="add" skin="green" v-bind:label="i18n('vue-example.add-new-row')"></cly-button>
                </template>
                <div>
                    <div style="width: 20%;display: inline-block;padding: 20px 30px 30px 30px; min-height: 150px;">
                        <pre>{{tableDiff}}</pre>
                        <pre>{{tableRows}}</pre>
                    </div>
                    <div style="width: 71%;vertical-align: top;float: right;padding: 30px 0 30px 30px;">
                        <cly-datatable 
                            :rows="tableRows"
                            :columns="tableColumns"
                            :has-detail-rows="true"
                            @set-row-data="setRowData"
                            @delayed-delete-record="onDelayedDelete"
                            @delete-record="onDelete"
                            @edit-record="onEditRecord">
                            <template slot="table-row" slot-scope="scope">
                                <cly-datatable-detail-toggler v-if="scope.props.column.field == 'cly-detail-toggler'"
                                    :scope="scope">
                                </cly-datatable-detail-toggler>
                                <cly-datatable-options v-else-if="scope.props.column.field == 'cly-options'"
                                    :scope="scope">
                                </cly-datatable-options>
                                <span v-else-if="scope.props.column.field == 'status'">
                                    <cly-check
                                        v-tooltip="scope.props.row.status?'Activated':'Deactivated'"
                                        :value="scope.props.row.status"
                                        @input="setRowData(scope.props.row, {status: $event})">
                                    </cly-check>
                                </span>
                                <span v-else>
                                    {{scope.props.formattedRow[scope.props.column.field]}}
                                </span>
                            </template>
                        </cly-datatable>
                        <cly-diff-helper
                            @save="updateStatusInfo"
                            @discard="unpatchStatusChanges"
                            :diff="tableDiff">
                        </cly-diff-helper>
                    </div>
                </div>
            </cly-panel>
        </cly-content>
        <cly-content v-bind:name='"Remote Table"' id="remote-table-tab">
            <cly-panel title="DataTable" v-bind:date-selector="false">
                <div>
                    <div style="width: 20%;display: inline-block;padding: 20px 30px 30px 30px; min-height: 150px;">
                        <pre>{{rTableData}}</pre>
                    </div>
                    <div style="width: 71%;vertical-align: top;float: right;padding: 30px 0 30px 30px;">
                        <cly-datatable
                            :rows="rTableData.rows"
                            :columns="rTableColumns"
                            :totalRows="rTableData.totalRows"
                            :notFilteredTotalRows="rTableData.notFilteredTotalRows"
                            mode="remote"
                            @remote-params-change="updateRemoteParams"
                            @set-row-data="setRowData">
                            <template slot="table-row" slot-scope="scope">
                                <span>
                                    {{scope.props.formattedRow[scope.props.column.field]}}
                                </span>
                            </template>
                        </cly-datatable>
                    </div>
                </div>
            </cly-panel>
        </cly-content>
        <cly-content name='Form elements' id="form-tab">
            <cly-panel title="Form elements" v-bind:date-selector="false">
                <div class="example-component">
                    <div class="example-cell">
                        Basic text input
                    </div>
                    <div class="example-cell">
                        <cly-text-field v-model="typedText"></cly-text-field>
                    </div>
                    <div class="example-cell">
                       {{typedText}}
                    </div>
                </div>
                <div class="example-component">
                    <div class="example-cell">
                        RadioButtons
                    </div>
                    <div class="example-cell">
                        <cly-radio v-bind:items="availableRadio" v-model="selectedRadio"></cly-radio>
                    </div>
                    <div class="example-cell">
                        Selected value: {{selectedRadio}}
                    </div>
                </div>
                <div class="example-component" style="height: 250px;">
                    <div class="example-cell">
                        Generic RadioButtons
                    </div>
                    <div class="example-cell">
                        <cly-generic-radio v-bind:items="availableGenericRadio" v-model="selectedGenericRadio"></cly-generic-radio>
                    </div>
                    <div class="example-cell">
                        Selected value: {{selectedGenericRadio}}
                    </div>
                </div>
                <div class="example-component">
                    <div class="example-cell">
                        Checkbox (flag)
                    </div>
                    <div class="example-cell">
                        <cly-check v-bind:label="'I am ' + (selectedCheckFlag ?'':'not') + ' checked.'" v-model="selectedCheckFlag"></cly-check>
                        <cly-check skin="tick" v-bind:label="'I am ' + (selectedCheckFlag ?'':'not') + ' checked.'" v-model="selectedCheckFlag"></cly-check>
                    </div>
                    <div class="example-cell">
                        Selected value: {{selectedCheckFlag}}
                    </div>
                </div>
                <div class="example-component">
                    <div class="example-cell">
                        Checkbox (list)
                    </div>
                    <div class="example-cell">
                        <cly-check-list v-bind:items="availableCheck" v-model="selectedCheck"></cly-check-list>
                        <cly-check-list skin="tick" v-bind:items="availableCheck" v-model="selectedCheck"></cly-check-list>
                    </div>
                    <div class="example-cell">
                        Selected value: {{selectedCheck}}
                    </div>
                </div>
                <div class="example-component">
                    <div class="example-cell">
                        Select (static)
                    </div>
                    <div class="example-cell">
                        <cly-select-n
                            style="width:220px"
                            v-bind:items="selectWItems" 
                            v-model="selectWModel"
                            placeholder="Select an item">
                        </cly-select-n>
                        <cly-select-n
                            style="width:220px"
                            v-bind:items="selectWItems" 
                            v-model="selectWModel"
                            placeholder="Select an item"
                            aligned="center">
                        </cly-select-n>
                        <cly-select-n
                            style="width:220px"
                            v-bind:items="selectWItems" 
                            v-model="selectWModel"
                            placeholder="Select an item"
                            aligned="right">
                        </cly-select-n>
                        <cly-select-n
                            style="width:220px"
                            v-bind:items="selectWItems" 
                            v-model="selectWModel"
                            placeholder="Select an item"
                            :disabled="true">
                        </cly-select-n>
                        <cly-select-n
                            style="width:120px"
                            v-bind:items="selectWItems" 
                            v-model="selectWModel"
                            placeholder="Select an item"
                            skin="slim">
                        </cly-select-n>
                    </div>
                    <div class="example-cell">
                        Selected item: {{selectWModel}}
                    </div>
                </div>
                <div class="example-component">
                    <div class="example-cell">
                        Select (dynamic)
                    </div>
                    <div class="example-cell">
                        <cly-select-n 
                            style="width:220px"
                            :items="selectDWItems" 
                            :dynamic-items="true"
                            :list-delay-warning="i18n('drill.big-list-warning')"
                            v-model="selectDWModel"
                            @search="onDSSearch"
                            placeholder="Select an item">
                        </cly-select-n>
                    </div>
                    <div class="example-cell">
                        Selected item: {{selectDWModel}}
                    </div>
                </div>
            </cly-panel>
        </cly-content>
    </cly-tabs>
</div>