@push('css')
    <style>
        .icon-tooltip:before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            color: #323232;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid ;
        }
        .toastMessage::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/images/circle-check.svg');
            background-size: cover;
            margin-right: 3px;
        }

        #pagination .relative{
            background-color: #FFFFFF !important;
        }

        #pagination .open > .dropdown-menu {
            display: flex;
            flex-direction: column;
        }

        #pagination .active {
            background-color: white !important;
            border: 1px solid #5799DB;
        }

        #pagination .active button {
            color: #5799DB;
        }

        #pagination .dropdown-menu {
            min-width: 97px;
        }
    </style>
@endpush
<div class="tab-pane fade in active text-[#222222] font-[300] text-[14px]" id="setting-color">
    <div class="font-[600] text-[16px]">対応ステータス編集</div>
    <div class="mt-[7px]">
        対応ステータスのテキストとカラーが変更できます
    </div>
    <div class="flex mt-[19px]">
        <button v-on:click="sc_show_create_modal = true"
                class="w-[110px] h-[35px] font-[400] text-[#5799DB] border border-solid border-[#5799DB] rounded-[5px] hover:opacity-70 flex items-center justify-center">
            <i class="mr-[5px] fal fa-plus"></i>
            追加
        </button>
        <button v-on:click="showModalSortColor()"
                class="w-[110px] h-[35px] border border-solid border-[#DDDDDD] rounded-[5px] hover:opacity-70 flex items-center justify-center ml-[10px]">
            <i class="mr-[5px] fas fa-arrows-alt"></i>
            並べ替え
        </button>
    </div>
    <div class="mt-[20px]">
        <ul class="min-h-[520px]">
            <li class="mt-[12px]" v-for="(item, index) in sc_color_list">
                <div class="flex items-center">
                    <div class="w-[350px] min-h-[40px] rounded-[5px] p-[10px] flex items-center"
                         :class="'bg-[' + item?.bg_status + ']'">
                        <div class="w-[16px] h-[16px] rounded-[20px]" :class="'bg-[' + item?.color + ']'"></div>
                        <div class="ml-[8px] mt-[-1px] font-[600]" :class="'text-[' + item?.color + ']'">@{{
                            item?.name_status }}
                        </div>
                    </div>
                    <div class="flex ml-[15px] text-[#1F1F1F]">
                        <button class="group border-b border-b-[#1F1F1F]" v-on:click="editColorItem(index)"
                                style="position: relative">
                            <div class="group-hover:opacity-70"><i class="far fa-pen"></i></div>
                            <div class="absolute icon-tooltip top-[-35px] left-[-17px] w-[50px] h-[28px] text-[#ffffff] bg-[#323232] rounded-[6px] pt-[2px] text-center invisible group-hover:visible text-[14px] font-[400]">
                                編集
                            </div>
                        </button>
                        <button class="group ml-[14px]" v-on:click="showModalDeleteColor(index)"
                                style="position: relative">
                            <div class="group-hover:opacity-70"><i class="far fa-trash"></i></div>
                            <div class="absolute icon-tooltip top-[-35px] left-[-19px] w-[50px] h-[28px] text-[#ffffff] bg-[#323232] rounded-[6px] pt-[2px] text-center invisible group-hover:visible text-[14px] font-[400]">
                                削除
                            </div>
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="mt-[20px] pb-[50px]">
        @include('basic.chat_setting.components.pagination')
    </div>
    @include('basic.chat_setting.modals.setting_color_create')
    @include('basic.chat_setting.modals.setting_color_confirm_delete')
    @include('basic.chat_setting.modals.setting_color_sort')
</div>