
<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Quản lý tỉnh / quận / phường</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Quản lý tỉnh / quận / phường</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body ">
                        <div class="d-flex flex-row justify-content-between mg-b-10">
                            <div class="pd-10">
                                <button type="button" class="btn btn-outline-primary button-icon ">
                                    <i class="fe fe-arrow-up me-2"></i>
                                    <span>Nhập dữ liệu</span>
                                </button>
                            </div>
                            <div class="pd-10">
                                <button type="button" class="btn btn-outline-primary button-icon">
                                    <i class="fe fe-arrow-down me-2"></i>

                                    <span>Xuất dữ liệu</span>
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">

                            </div>
                        </div>
                        <div class="panel panel-primary tabs-style-2">
                            <div class=" tab-menu-heading">
                                <div class="tabs-menu1"> <!-- Tabs -->
                                    <ul class="nav panel-tabs main-nav-line">
                                        <li><a href="#city" class="nav-link me-1 active" data-bs-toggle="tab">Tỉnh / thành
                                                phố</a>
                                        </li>
                                        <li><a href="#district" class="nav-link me-1" data-bs-toggle="tab">Quận / huyện</a>
                                        </li>
                                        <li><a href="#ward" class="nav-link me-1" data-bs-toggle="tab">Phường / xã</a></li>
                                        <li>
                                            <a href="#endpoints" class="nav-link" data-bs-toggle="tab">Điểm đầu cuối</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="panel-body tabs-menu-body main-content-body-right border">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="city">
                                        <Location :level="1"></Location>
                                    </div>
                                    <div class="tab-pane" id="district">
                                        <Location :level="2"></Location>
                                    </div>
                                    <div class="tab-pane" id="ward">
                                        <Location :level="3"></Location>
                                    </div>
                                    <div class="tab-pane" id="endpoints">
                                        <Endpoints></Endpoints>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
//#region Imports
//#endregion


//#region Imports
import { ref, reactive, onMounted } from 'vue'
import menuService from "@/services/menuService";
//#endregion

//#region Components

import Location from './components/list.vue';
import Endpoints from './components/endpoints.vue';
//#endregion


</script>
