@extends('component-base.layout')

@section('title')
    A - 1カラム (フォルダあり)
@endsection

@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/component-base/category/category.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/tooltip/tooltip.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/hyperlink/hyperlink.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/left-panel/left-panel.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/table/table.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/switch/switch.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/input/input.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/input/select.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/commons/css/components/dropdown.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/commons/css/components/pagination.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/empty-view/empty-view.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/layout-demo/table-a.css?v={{config("sns-line.version")}}">
    <style>
        .ct202602-pagination a {
            text-decoration: none;
        }
    </style>
@endpush

@section('contents')
<div id="vue-element" v-cloak>
    <div class="layout-table-a">

        <!-- Page Header -->
        <div class="layout-table-a-header">
            <div class="layout-table-a-header-left">
                <span class="layout-table-a-title">ページタイトル名</span>
                <lme-button-flat size="medium">
                    <svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 2px;">
                        <path d="M7.8732 12.3505C7.84855 12.3505 7.82229 12.3424 7.79726 12.3272L7.01764 11.825C6.29086 11.3567 5.44953 11.1091 4.5846 11.1091H0.56295C0.25254 11.1091 0 10.8571 0 10.5472V0.56295C0 0.25254 0.25254 0 0.56295 0H4.5846C5.45055 0 6.29188 0.247534 7.01764 0.715837L7.87522 1.26562L8.73281 0.715837C9.45959 0.247534 10.3009 0 11.1659 0H15.1875C15.4979 0 15.7505 0.25254 15.7505 0.56295V10.5472C15.7505 10.8571 15.4979 11.1091 15.1875 11.1091H11.1659C10.2999 11.1091 9.45756 11.3567 8.72977 11.825L7.94914 12.3272C7.92724 12.3424 7.90096 12.3505 7.8732 12.3505ZM11.1659 1.26562C10.5432 1.26562 9.93821 1.44314 9.41625 1.77896L8.55866 2.32875L8.43716 2.40772V10.529C9.27306 10.0802 10.2172 9.84352 11.1659 9.84352H14.4848V1.26562H11.1659ZM1.26562 1.26562V9.84352H4.5846C5.53482 9.84352 6.47803 10.0806 7.31227 10.529V2.40772L7.19076 2.32875L6.33319 1.77896C5.81225 1.44314 5.20759 1.26562 4.5846 1.26562H1.26562ZM13.1625 7.0308H9.8982C9.82953 7.0308 9.77366 6.97175 9.77366 6.89917V6.10841C9.77366 6.03584 9.82953 5.97679 9.8982 5.97679H13.1645C13.1966 5.97679 13.2271 5.98997 13.2503 6.0139C13.2746 6.03891 13.288 6.07336 13.287 6.10841V6.89917C13.287 6.97175 13.2312 7.0308 13.1625 7.0308ZM5.85022 7.0308H2.58592C2.51726 7.0308 2.46139 6.97175 2.46139 6.89917V6.10841C2.46139 6.03584 2.51726 5.97679 2.58592 5.97679H5.85225C5.8843 5.97679 5.91478 5.98997 5.93805 6.0139C5.96237 6.03891 5.97575 6.07336 5.97476 6.10841V6.89917C5.97476 6.97052 5.91774 7.0308 5.85022 7.0308ZM13.1625 4.57043H9.8982C9.82953 4.57043 9.77366 4.51137 9.77366 4.4388V3.64703C9.77366 3.57445 9.82953 3.5154 9.8982 3.5154H13.1625C13.2312 3.5154 13.287 3.57445 13.287 3.64703V4.4388C13.287 4.51137 13.2312 4.57043 13.1625 4.57043ZM5.85022 4.57043H2.58592C2.51726 4.57043 2.46139 4.51137 2.46139 4.4388V3.64703C2.46139 3.57445 2.51726 3.5154 2.58592 3.5154H5.85225C5.8843 3.5154 5.91478 3.52858 5.93805 3.55251C5.96237 3.57752 5.97575 3.61197 5.97476 3.64703V4.4388C5.97476 4.51015 5.91774 4.57043 5.85022 4.57043Z" fill="currentColor"/>
                    </svg>

                    使い方を見る
                </lme-button-flat>
            </div>
            <lme-button size="lg" @click="onCreateNew">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7 1V13M1 7H13" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
                </svg>
                新規作成
            </lme-button>
        </div>

        <!-- Body: left-panel + main -->
        <div class="layout-table-a-body">

            <!-- Left Panel -->
            <div class="layout-table-a-panel">
                <lme-left-panel
                    title="フォルダ"
                    theme="lme-theme"
                    :categories="categories"
                    @select="onSelect"
                    @rename="onFolderRename"
                    @delete="onFolderDelete"
                    @add-sub="onAddSub"
                    @add="onAdd"
                    @sort="onSortFolder"
                />
            </div>

            <!-- Main Content -->
            <div class="layout-table-a-main">

                <!-- Toolbar -->
                <div class="layout-table-a-toolbar">
                    {{-- Sort mode toolbar --}}
                    <template v-if="isSortMode">
                        <div class="layout-table-a-toolbar-left">
                            <span style="font-size: 14px; color: #1F1F1F;">ドラッグアンドドロップで並び替えができます</span>
                        </div>
                        <div class="layout-table-a-toolbar-right" style="gap: 8px;">
                            <lme-button-flat size="lg" @click="cancelSortMode">キャンセル</lme-button-flat>
                            <lme-button size="lg" @click="saveSortMode">保存</lme-button>
                        </div>
                    </template>

                    {{-- Bulk select toolbar --}}
                    <template v-else-if="selectedIds.length > 0">
                        <div class="layout-table-a-toolbar-left">
                            <lme-select
                                :value="bulkAction"
                                :options="bulkActionOptions"
                                placeholder="一括操作"
                                width="180px"
                                @input="bulkAction = $event"
                            ></lme-select>
                            <lme-button size="lg" @click="onBulkApply">適用</lme-button>
                            <div style="font-size: 14px; color: #1F1F1F;">
                                <span style="font-weight: 500; font-size: 16px; color: #1677FF">@{{ selectedIds.length }}件</span>のデータを選択中
                            </div>
                            <lme-button-ghost type="secondary" size="lg" @click="selectedIds = []">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.374 0.000103714C12.3744 0.000240433 12.3748 0.000455277 12.3756 0.00125606L13.5024 1.12801C13.5032 1.12881 13.5034 1.12919 13.5035 1.12965C13.5037 1.13009 13.5037 1.13056 13.5035 1.131C13.5034 1.13145 13.5032 1.13182 13.5024 1.13262L7.88319 6.75182L13.5024 12.371C13.5032 12.3718 13.5034 12.3722 13.5035 12.3726C13.5037 12.3731 13.5037 12.3736 13.5035 12.374C13.5034 12.3744 13.5032 12.3748 13.5024 12.3756L12.3756 13.5024C12.3748 13.5032 12.3745 13.5034 12.374 13.5035C12.3736 13.5037 12.3731 13.5037 12.3726 13.5035C12.3722 13.5034 12.3718 13.5032 12.371 13.5024L6.75182 7.88319L1.13262 13.5024C1.13184 13.5032 1.13145 13.5034 1.131 13.5035C1.13056 13.5037 1.13008 13.5037 1.12963 13.5035C1.12921 13.5034 1.12881 13.5032 1.12801 13.5024L0.00125606 12.3756C0.000455277 12.3748 0.000240433 12.3745 0.000103714 12.374C-3.05589e-05 12.3736 -3.05589e-05 12.3731 0.000103714 12.3726C0.000240433 12.3722 0.000455277 12.3718 0.00125606 12.371L5.62044 6.75182L0.00125606 1.13262C0.000455277 1.13184 0.000240433 1.13145 0.000103714 1.131C-3.45714e-05 1.13056 -3.45714e-05 1.13008 0.000103714 1.12963C0.000240433 1.12921 0.000455277 1.12881 0.00125606 1.12801L1.12801 0.00125606C1.12881 0.000455277 1.12919 0.000240433 1.12965 0.000103714C1.13009 -3.05589e-05 1.13056 -3.05589e-05 1.131 0.000103714C1.13145 0.000240433 1.13182 0.000455277 1.13262 0.00125606L6.75182 5.62044L12.371 0.00125606C12.3718 0.000455277 12.3722 0.000240433 12.3726 0.000103714C12.3731 -3.45714e-05 12.3735 -3.45714e-05 12.374 0.000103714Z" fill="currentColor"/>
                                </svg>

                                全ての選択を解除
                            </lme-button-ghost>
                        </div>
                    </template>

                    {{-- Default toolbar --}}
                    <template v-else>
                        <div class="layout-table-a-toolbar-left">
                            <lme-input-search
                                v-model="keyword"
                                placeholder="管理名を入力して検索"
                                width="280px"
                                size="md"
                                @search="onSearch"
                            ></lme-input-search>
                            <lme-button-flat size="lg" @click="onFilter">
                                <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.3739 13.9849H5.24956C4.90714 13.9849 4.62855 13.7043 4.62855 13.3594V8.66025L0.0846892 0.937125C-0.0283608 0.741262 -0.0282233 0.5072 0.0850642 0.311C0.197514 0.116263 0.398402 0 0.622439 0H15.0011C15.2247 0 15.4255 0.116288 15.5382 0.311075C15.6518 0.507312 15.6524 0.74135 15.5399 0.937125L10.9949 8.66025L10.9949 13.3594C10.9949 13.7043 10.7164 13.9849 10.3739 13.9849ZM6.02693 9.53099V12.5786H9.59655L9.59881 9.531L6.02693 9.53099ZM1.96569 1.40625L5.83906 7.95712L6.02468 8.28112H9.5988L9.78444 7.95712L13.6578 1.40625H1.96569Z" fill="currentColor"/>
                                </svg>

                                絞り込み
                            </lme-button-flat>
                        </div>
                        <div class="layout-table-a-toolbar-right">
                            <lme-button-flat size="lg" @click="toggleSortMode">
                                <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M2.89237 13.6022H1.80349C1.7146 13.6022 1.64793 13.5356 1.64793 13.4467V3.09113H0.159041C0.103486 3.09113 0.0479301 3.05779 0.0145968 3.00224C-0.00762545 2.94668 -0.00762548 2.88002 0.036819 2.83557L2.22571 0.0577932C2.28126 -0.00887345 2.38126 -0.0199845 2.44793 0.035571L2.47015 0.0577932L4.65904 2.83557C4.65904 2.83557 4.70349 2.94668 4.68126 3.00224C4.65904 3.05779 4.60349 3.09113 4.53682 3.09113H3.04793V13.4467C3.04793 13.5356 2.97015 13.6022 2.89237 13.6022ZM10.4702 13.6022C10.4702 13.6022 10.3813 13.58 10.3479 13.5467L8.15904 10.78C8.15904 10.78 8.1146 10.6689 8.13682 10.6133C8.15904 10.5578 8.2146 10.5245 8.28126 10.5245H9.77015V0.157793C9.77015 0.0689042 9.83682 0.00223771 9.92571 0.00223771H11.0146C11.1035 0.00223771 11.1702 0.0689042 11.1702 0.157793V10.5133H12.659C12.7146 10.5133 12.7702 10.5467 12.8035 10.6022C12.8257 10.6578 12.8257 10.7245 12.7813 10.7689L10.5924 13.5356C10.5924 13.5356 10.5146 13.5911 10.4702 13.5911V13.6022Z" fill="currentColor"/>
                                </svg>

                                並べ替え
                            </lme-button-flat>
                        </div>
                    </template>
                </div>

                <!-- Table -->
                <div class="layout-table-a-table">
                    <lme-table
                        :columns="columns"
                        :data-source="tableData"
                        row-key="id"
                        :selectable="!isSortMode"
                        :selected-row-keys="selectedIds"
                        :drag-sortable="isSortMode"
                        :fixed-right-count="2"
                        :total-count="filteredData.length"
                        max-height="calc(100vh - 300px)"
                        @select-change="onSelectChange"
                        @sort-change="onSortChange"
                        @drag-sort-end="onDragSortEnd"
                        @select-all="onSelectAll"
                    >
                        {{-- 管理名 column: star + text --}}
                        <template slot="cell-manageName" slot-scope="{ record, value }">
                            <div class="lme-flex lme-items-center" style="gap: 8px;">
                                <div class="lme-flex lme-items-center lme-justify-center cursor-pointer" @click.stop="toggleFavorite(record)">
                                    <svg v-if="record.isFavorite" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.9627 6.20694L11.4996 5.55831L9.50446 1.51358C9.44997 1.40284 9.36032 1.31319 9.24958 1.2587C8.97184 1.12159 8.63434 1.23585 8.49548 1.51358L6.50036 5.55831L2.03727 6.20694C1.91423 6.22452 1.80173 6.28253 1.71559 6.37042C1.49938 6.59366 1.5029 6.94874 1.72614 7.16671L4.95524 10.3149L4.19235 14.7605C4.17126 14.8817 4.19059 15.0083 4.2486 15.1173C4.39274 15.3915 4.73376 15.4987 5.00798 15.3528L8.99997 13.254L12.992 15.3528C13.1009 15.4108 13.2275 15.4302 13.3488 15.4091C13.6547 15.3564 13.8603 15.0663 13.8076 14.7605L13.0447 10.3149L16.2738 7.16671C16.3617 7.08057 16.4197 6.96807 16.4373 6.84503C16.4847 6.53741 16.2703 6.25264 15.9627 6.20694Z" fill="#69B1FF"/>
                                    </svg>
                                    <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.9627 6.20694L11.4996 5.55831L9.50446 1.51358C9.44997 1.40284 9.36032 1.31319 9.24958 1.2587C8.97184 1.12159 8.63434 1.23585 8.49548 1.51358L6.50036 5.55831L2.03727 6.20694C1.91423 6.22452 1.80173 6.28253 1.71559 6.37042C1.49938 6.59366 1.5029 6.94874 1.72614 7.16671L4.95524 10.3149L4.19235 14.7605C4.17126 14.8817 4.19059 15.0083 4.2486 15.1173C4.39274 15.3915 4.73376 15.4987 5.00798 15.3528L8.99997 13.254L12.992 15.3528C13.1009 15.4108 13.2275 15.4302 13.3488 15.4091C13.6547 15.3564 13.8603 15.0663 13.8076 14.7605L13.0447 10.3149L16.2738 7.16671C16.3617 7.08057 16.4197 6.96807 16.4373 6.84503C16.4847 6.53741 16.2703 6.25264 15.9627 6.20694Z" fill="#D1D1D1"/>
                                    </svg>
                                </div>
                                <span class="lme-line-clamp-1" style="max-width: 300px; color: #1F1F1F; font-size: 14px;">@{{ value }}</span>
                            </div>
                        </template>

                        {{-- 操作 column: action icons with tooltip (like table-b) --}}
                        <template slot="cell-actions" slot-scope="{ record }">
                            <div class="layout-table-a-actions">
                                    <lme-button-ghost type="blue" size="sm" :icon="true" :rounded="true" @click="onPreview(record)">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M7.87522 15.7505C3.53281 15.7505 0 12.2176 0 7.87522C0 3.53281 3.53281 0 7.87522 0C12.2176 0 15.7505 3.53281 15.7505 7.87522C15.7505 12.2176 12.2176 15.7505 7.87522 15.7505ZM7.87522 1.33549C4.26921 1.33549 1.33549 4.26921 1.33549 7.87522C1.33549 11.4807 4.26921 14.4139 7.87522 14.4139C11.4807 14.4139 14.4139 11.4807 14.4139 7.87522C14.4139 4.26921 11.4807 1.33549 7.87522 1.33549Z" fill="currentColor"/>
                                            <path d="M6.15178 11.935C6.01679 11.935 5.87109 11.8277 5.87109 11.6543V4.09598C5.87109 3.92205 6.01616 3.81439 6.15057 3.81439C6.2093 3.81439 6.26636 3.83334 6.31558 3.86918L11.5208 7.64884C11.5947 7.7024 11.637 7.78489 11.637 7.87514C11.637 7.96538 11.5947 8.04787 11.5208 8.10143L6.31558 11.8811C6.26696 11.9164 6.21033 11.935 6.15178 11.935ZM6.99294 5.74635V10.0039L9.92312 7.87463L6.99294 5.74635Z" fill="currentColor"/>
                                        </svg>
                                    </lme-button-ghost>
                                    <lme-button-ghost type="blue" size="sm" :icon="true" :rounded="true" @click="onEdit(record)">
                                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.9219 7.03125H12.9375C12.8602 7.03125 12.7969 7.09453 12.7969 7.17188V12.7969H1.26562V1.26562H6.89062C6.96797 1.26562 7.03125 1.20234 7.03125 1.125V0.140625C7.03125 0.0632812 6.96797 0 6.89062 0H0.5625C0.251367 0 0 0.251367 0 0.5625V13.5C0 13.8111 0.251367 14.0625 0.5625 14.0625H13.5C13.8111 14.0625 14.0625 13.8111 14.0625 13.5V7.17188C14.0625 7.09453 13.9992 7.03125 13.9219 7.03125Z" fill="currentColor"/>
                                            <path d="M4.54249 9.80809H4.5354C4.45931 9.80809 4.38805 9.77835 4.33476 9.72438C4.28166 9.67059 4.25296 9.59928 4.25393 9.52357L4.28734 7.43377C4.28734 7.39925 4.3021 7.36344 4.32784 7.33556L11.6371 0.0405C11.6642 0.0143775 11.6998 0 11.7373 0C11.7764 0 11.811 0.0140063 11.8376 0.0405L14.0225 2.22345C14.0758 2.27774 14.0758 2.36862 14.0225 2.4219L6.71127 9.71696C6.68863 9.74053 6.65394 9.75529 6.61609 9.75746L4.54249 9.80809ZM11.7373 1.52886L5.40312 7.8489L5.39097 8.66397L6.19489 8.64472L12.5311 2.32166L11.7373 1.52886Z" fill="currentColor"/>
                                        </svg>
                                    </lme-button-ghost>
                                    <lme-button-ghost type="blue" size="sm" :icon="true" :rounded="true" @click="onCopy(record)">
                                        <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M9.56205 15.7505H3.60855C3.54544 15.7505 3.48038 15.7385 3.41516 15.715H3.34125V15.6816C3.29002 15.6533 3.24744 15.6211 3.21165 15.5844L0.165037 12.5388C0.0586125 12.4324 0 12.2911 0 12.1409V2.81273C0 2.50232 0.25254 2.24978 0.56295 2.24978H9.56205C9.87246 2.24978 10.125 2.50232 10.125 2.81273V15.1875C10.125 15.4979 9.87246 15.7505 9.56205 15.7505ZM1.26562 3.5154V11.2853H3.76144C4.14945 11.2853 4.46513 11.6005 4.46513 11.988V14.4848H8.85938V3.5154H1.26562ZM1.82655 12.4102L3.34024 13.9249V12.4102H1.82655ZM12.234 13.4997H11.2499C11.1723 13.4997 11.1092 13.4365 11.1092 13.3589V1.26562H2.39051C2.31423 1.26562 2.24977 1.20117 2.24977 1.12489V0.140738C2.24977 0.063135 2.31291 0 2.39051 0H11.8128C12.1227 0 12.3748 0.25254 12.3748 0.56295V13.3589C12.3748 13.4365 12.3116 13.4997 12.234 13.4997Z" fill="currentColor"/>
                                        </svg>
                                    </lme-button-ghost>
                                    <lme-button-ghost type="red" size="sm" :icon="true" :rounded="true" @click="onDeleteRow(record)">
                                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10.7406 14.0626H2.76008C2.1583 14.0626 1.66464 13.5916 1.6362 12.9904L1.20184 3.79688H0.140738C0.063135 3.79688 0 3.73374 0 3.65614V3.0942C0 2.78379 0.25254 2.53125 0.56295 2.53125H2.81273V1.12489C2.81273 0.504619 3.31734 0 3.93761 0H9.56205C10.1829 0 10.688 0.504619 10.688 1.12489V2.53013L9.42233 2.53125H12.9377C13.2476 2.53125 13.4997 2.78379 13.4997 3.0942V3.65614C13.4997 3.73374 13.4365 3.79688 13.3589 3.79688H12.2978L11.8635 12.9904C11.8351 13.5916 11.3419 14.0626 10.7406 14.0626ZM2.46949 3.79688L2.89474 12.797H10.6049L11.0302 3.79688H2.46949ZM4.07835 2.53125H9.42233V1.26675L9.56205 1.26562C9.48499 1.2656 9.42233 1.20147 9.42233 1.12489V1.26675L4.07835 1.26562V2.53125Z" fill="currentColor"/>
                                        </svg>
                                    </lme-button-ghost>
                                    <lme-button-ghost type="blue" size="sm" :icon="true" :rounded="true">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.9373 8.9822C12.9373 8.43882 13.3781 7.99805 13.9221 7.99805C14.4655 7.99805 14.9062 8.43882 14.9062 8.9822C14.9062 9.52625 14.4655 9.96702 13.9221 9.96702C13.3781 9.96702 12.9373 9.52625 12.9373 8.9822ZM8.01585 8.9822C8.01585 8.43882 8.45662 7.99805 9 7.99805C9.54338 7.99805 9.98415 8.43882 9.98415 8.9822C9.98415 9.52625 9.54338 9.96702 9 9.96702C8.45662 9.96702 8.01585 9.52625 8.01585 8.9822ZM3.58583 9.83472C3.2814 9.65922 3.09375 9.33387 3.09375 8.9822C3.09375 8.63052 3.2814 8.30585 3.58583 8.12967C3.89025 7.95417 4.26555 7.95417 4.56998 8.12967C4.87508 8.30585 5.06273 8.63052 5.06273 8.9822C5.06273 9.33387 4.87508 9.65922 4.56998 9.83472C4.41776 9.92281 4.24783 9.96685 4.0779 9.96685C3.90797 9.96685 3.73804 9.92281 3.58583 9.83472Z" fill="#1677FF"/>
                                        </svg>
                                    </lme-button-ghost>
                            </div>
                        </template>

                        {{-- 公開状態 column: switch (fixed right) --}}
                        <template slot="cell-isPublished" slot-scope="{ record }">
                            <lme-switch v-model="record.isPublished" size="md"></lme-switch>
                        </template>

                        <template slot="empty">
                            <lme-empty-view
                                    type="empty"
                                    :show-description="showDescription"
                                    ></lme-empty-view>
                        </template>
                    </lme-table>
                </div>

                <!-- Footer -->
                <div class="layout-table-a-footer">
                    <lme-button-ghost type="secondary" size="md" @click="onShowDeleted">
                        <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.7406 14.0626H2.76008C2.1583 14.0626 1.66464 13.5916 1.6362 12.9904L1.20184 3.79688H0.140738C0.063135 3.79688 0 3.73374 0 3.65614V3.0942C0 2.78379 0.25254 2.53125 0.56295 2.53125H2.81273V1.12489C2.81273 0.504619 3.31734 0 3.93761 0H9.56205C10.1829 0 10.688 0.504619 10.688 1.12489V2.53013L9.42233 2.53125H12.9377C13.2476 2.53125 13.4997 2.78379 13.4997 3.0942V3.65614C13.4997 3.73374 13.4365 3.79688 13.3589 3.79688H12.2978L11.8635 12.9904C11.8351 13.5916 11.3419 14.0626 10.7406 14.0626ZM2.46949 3.79688L2.89474 12.797H10.6049L11.0302 3.79688H2.46949ZM4.07835 2.53125H9.42233V1.26675L9.56205 1.26562C9.48499 1.2656 9.42233 1.20147 9.42233 1.12489V1.26675L4.07835 1.26562V2.53125Z" fill="currentColor"/>
                        </svg>

                        削除したアイテム
                    </lme-button-ghost>
                    <pagination
                        :pagination="pagination"
                        :is_limit="true"
                        :arr_limit="[10, 20, 30, 50, 100]"
                        end_text_limit="件 / ページ"
                        @change_page="changePage"
                        @change_limit="changeLimit">
                    </pagination>
                </div>

            </div>
        </div>

    </div>
</div>
@endsection

@push('js')
<script src="/js/component-base/category/lme-category.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/button/lme-button.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/button/lme-button-flat.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/button/lme-button-ghost.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/hyperlink/lme-hyperlink.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/left-panel/lme-left-panel.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/input/lme-input-search.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/input/lme-select.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/switch/lme-switch.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/table/lme-table.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/empty-view/lme-empty-view.js?v={{config("sns-line.version")}}"></script>
<script src="/_assets/commons/js/components/dropdown.js?v={{config("sns-line.version")}}"></script>
<script src="/_assets/commons/js/components/pagination.js?v={{config("sns-line.version")}}"></script>
{{--<script src="/js/media/vue.min.js?v={{config("sns-line.version")}}"></script>--}}
<script>
let vueElement = new Vue({
    el: '#vue-element',
    data: {
        keyword: '',
        selectedIds: [],
        isSortMode: false,
        sortBackup: null,
        sortKey: null,
        sortOrder: null,
        bulkAction: null,
        bulkActionOptions: [
            { value: 'move', label: '一括フォルダ移動' },
            { value: 'delete', label: '一括削除', className: 'danger' },
        ],
        columns: [
            { key: 'manageName', title: '管理名',  width: '280px', sortable: true },
            { key: 'createdAt',  title: '作成日時', width: '160px', sortable: true },
            { key: 'updatedAt',  title: '更新日時', width: '160px', sortable: true },
            { key: 'actions',    title: '操作',     width: '200px' },
            { key: 'isPublished', title: '公開状態', width: '100px' },
        ],
        categories: {
            selected: 'all',
            default:  { id: 'all',      label: '未分類',     total: 12 },
            favorite: { id: 'favorite', label: 'お気に入り',  total: 3  },
            main: [
                {
                    id: 'folder-1',
                    label: 'フォルダ名',
                    total: 5,
                    sub: [],
                    standalone: true
                },
                { id: 'folder-2', label: 'フォルダ名 2', total: 4, sub: [], standalone: true, },
                { id: 'folder-3', label: 'フォルダ名 3', total: 0, sub: [], standalone: true, },
            ]
        },
        pagination: {
            current_page: 1,
            per_page: 10,
            last_page: 2,
        },
        allData: [
        ],
    },
    computed: {
        filteredData() {
            let data = this.allData;
            if (this.keyword) {
                const kw = this.keyword.toLowerCase();
                data = data.filter(r => r.manageName.toLowerCase().includes(kw));
            }
            if (this.sortKey && this.sortOrder) {
                const key = this.sortKey;
                const dir = this.sortOrder === 'asc' ? 1 : -1;
                data = [...data].sort((a, b) => {
                    const va = (a[key] || '').toString();
                    const vb = (b[key] || '').toString();
                    return va.localeCompare(vb) * dir;
                });
            }
            return data;
        },
        tableData() {
            const start = (this.pagination.current_page - 1) * this.pagination.per_page;
            return this.filteredData.slice(start, start + this.pagination.per_page);
        },
    },
    methods: {
        onSelect(id) {
            this.categories.selected = id;
            this.pagination.current_page = 1;
        },
        onFolderRename(item) {},
        onFolderDelete(item) {},
        onAddSub(parent) {},
        onAdd() {},
        onSortFolder() {},
        onSearch(kw) { this.keyword = kw; this.pagination.current_page = 1; },
        onFilter() {
            console.log('filter');
        },
        toggleSortMode() {
            this.sortBackup = JSON.parse(JSON.stringify(this.allData));
            this.isSortMode = true;
            this.selectedIds = [];
        },
        cancelSortMode() {
            if (this.sortBackup) {
                this.allData = this.sortBackup;
            }
            this.sortBackup = null;
            this.isSortMode = false;
        },
        saveSortMode() {
            this.sortBackup = null;
            this.isSortMode = false;
            console.log('sort saved');
        },
        onBulkApply() {
            if (!this.bulkAction) return;
            if (this.bulkAction === 'delete') {
                this.allData = this.allData.filter(r => !this.selectedIds.includes(r.id));
            }
            this.selectedIds = [];
            this.bulkAction = null;
        },
        onDragSortEnd(newData) {
            const start = (this.pagination.current_page - 1) * this.pagination.per_page;
            const newIds = newData.map(r => r.id);
            const rest = this.allData.filter(r => !newIds.includes(r.id));
            this.allData = [
                ...rest.slice(0, start),
                ...newData,
                ...rest.slice(start),
            ];
        },
        onCreateNew() {},
        onPreview(row) { console.log('preview', row.id); },
        onEdit(row) { console.log('edit', row.id); },
        onCopy(row) { console.log('copy', row.id); },
        onDeleteRow(row) { console.log('delete', row.id); },
        onMoreAction(row, action) {
            if (action === 1) console.log('公開する', row.id);
            if (action === 2) this.onCopy(row);
            if (action === 3) console.log('フォルダに移動', row.id);
            if (action === 4) this.onDeleteRow(row);
        },
        onPanelToggle(isCollapsed) {
            this.isPanelCollapsed = isCollapsed;
        },
        onShowDeleted() {},
        toggleFavorite(row) {
            row.isFavorite = !row.isFavorite;
        },
        onSelectAll(checked) {
            if (checked) {
                this.selectedIds = this.filteredData.map(r => r.id);
            } else {
                this.selectedIds = this.tableData.map(r => r.id);
            }
        },
        onSelectChange(keys) {
            this.selectedIds = keys;
        },
        onSortChange(sortInfo) {
            this.sortKey = sortInfo.key;
            this.sortOrder = sortInfo.order;
        },
        changePage(page) {
            this.pagination.current_page = page;
        },
        changeLimit(limit) {
            this.pagination.current_page = 1;
            this.pagination.per_page = limit;
        },
    },
    watch: {
        filteredData(val) {
            this.pagination.current_page = 1;
            this.pagination.last_page = Math.max(1, Math.ceil(val.length / this.pagination.per_page));
        },
    },
});
</script>
@endpush