<!DOCTYPE html>
<head>
  <meta charset="utf-8" />

  <!-- <title>30/04/2018</title> -->
  <!-- <title>06/09/2023</title> -->
  <!-- <title>10/09/2024</title> -->

  <!-- Custom styles -->
  <link href="../css/modus.min.css" rel="stylesheet" id="theme-stylesheet"/>
  <link href="../css/modus-layout.min.css" rel="stylesheet" />
  <link href="../css/styles.css" rel="stylesheet" />

  <!-- Modus Icons -->
  <link href="../fonts/modus-icons.css" rel="stylesheet" />

  <!-- Modus Bootstrap -->
  <script src="../js/lib/jquery-3.6.0.min.js"></script>
  <script src="../js/lib/bootstrap.bundle.min.js"></script>

  <!-- Vue -->
  <script src="../js/lib/vue.js"></script>

  <!-- Translate -->
  <script src="../js/lib/axios.min.js"></script>

  <!-- Drag and sort -->
  <script src="../js/lib/sortable.min.js"></script>

  <!-- Common functions -->
  <script src="../js/common.js"></script>
  <script src="../js/mixins/base-mixin.js"></script>

  <!-- Components -->
  <script src="../js/components/modals/modal-header.js"></script>
  <script src="../js/components/modals/modal-footer.js"></script>
  <script src="../js/components/modals/action-modal.js"></script>
  <script src="../js/components/modals/add-source-modal.js"></script>
  <script src="../js/components/modals/message-modal.js"></script>
  <script src="../js/components/modals/user-options-modal.js"></script>
  
  <script src="../js/components/sidebar.js"></script>
  <script src="../js/components/subfolder-column.js"></script>
  <script src="../js/components/online-container.js"></script>
  <script src="../js/components/local-panel.js"></script>
  <script src="../js/components/model-content.js"></script>
  <script src="../js/components/material-content.js"></script>
  <script src="../js/components/door-content.js"></script>
  <script src="../js/components/handle-content.js"></script>
  <script src="../js/components/component-content.js"></script>
  <script src="../js/components/model-context-menus.js"></script>
  <script src="../js/components/material-context-menus.js"></script>
  <script src="../js/components/door-context-menus.js"></script>
  <script src="../js/components/handle-context-menus.js"></script>
</head>

<body>
  <div class="modus-layout" id="app">
    <!-- HEADER -->
    <nav class="modus-header">
      <ul class="nav nav-tabs custom-nav-tabs d-flex align-items-center ml-2" role="tablist">
        <button
          type="button"
          id="sidebarMenu"
          class="btn btn-icon-only btn-text-dark mt-2 mr-2"
          @click="handleToggleSidebar()"
        >
          <i class="modus-icons">menu</i>
        </button>

        <div class="header-search-pill-wrap">
          <input
            v-model="searchQuery"
            type="text"
            class="header-search-pill"
            :placeholder="translated('find') || '查找...'"
            @keydown.enter="onHeaderSearchEnter"
          />
          <span
            class="header-search-pill-icon cursor-pointer"
            :title="searchQuery ? (translated('find') || '') : (translated('enableDeepSearch') || '')"
            @click="searchQuery ? (searchQuery = '') : toggleActiveDeepSearch()"
          >
            <i class="modus-icons">{{ searchQuery ? 'close' : 'search' }}</i>
          </span>
        </div>

        <li class="nav-item">
          <a 
            class="nav-link custom-nav-link active"
            id="firstTab"
            data-toggle="tab"
            href="#firstTabContent"
            role="tab"
            aria-controls="firstTab"
            aria-selected="true"
            @click="toggleTab('model')"
          >
            {{ translated('model') }}
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link custom-nav-link"
            id="secondTab"
            data-toggle="tab"
            href="#secondTabContent"
            role="tab"
            aria-controls="secondTab" aria-selected="false"
            @click="toggleTab('material')"
          >
            {{ translated('material') }}
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link custom-nav-link"
            id="thirdTab"
            data-toggle="tab"
            href="#thirdTabContent"
            role="tab"
            aria-controls="thirdTab"
            aria-selected="false"
            @click="toggleTab('door')"
          >
            {{ translated('doorStyle') }}
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link custom-nav-link"
            id="fourthTab"
            data-toggle="tab"
            href="#fourthTabContent"
            role="tab"
            aria-controls="fourthTab"
            aria-selected="false"
            @click="toggleTab('handle')"
          >
            {{ translated('handle') }}
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link custom-nav-link"
            id="fifthTab"
            data-toggle="tab"
            href="#fifthTabContent"
            role="tab"
            aria-controls="fifthTab"
            aria-selected="false"
            @click="toggleTab('component')"
          >
            {{ translated('component') }}
          </a>
        </li>
      </ul>
    </nav>

    <!-- TAB CONTENT -->
    <div class="tab-content">
      <!-- MODEL -->
      <div
        class="tab-pane fade show active"
        id="firstTabContent"
        role="tabpanel"
        aria-labelledby="firstTab"
      >
        <model ref="modelComponent" :search-query="searchQuery" @update:search-query="searchQuery = $event"></model>
      </div>

      <!-- MATERIAL -->
      <div
        class="tab-pane fade"
        id="secondTabContent"
        role="tabpanel"
        aria-labelledby="secondTab"
      >
        <material ref="materialComponent" :search-query="searchQuery" @update:search-query="searchQuery = $event"></material>
      </div>

      <!-- DOOR STYLE 门型 -->
      <div
        class="tab-pane fade"
        id="thirdTabContent"
        role="tabpanel"
        aria-labelledby="thirdTab"
      >
        <door ref="doorComponent" :search-query="searchQuery" @update:search-query="searchQuery = $event"></door>
      </div>

      <!-- HANDLE 拉手 -->
      <div
        class="tab-pane fade"
        id="fourthTabContent"
        role="tabpanel"
        aria-labelledby="fourthTab"
      >
        <handle ref="handleComponent" :search-query="searchQuery" @update:search-query="searchQuery = $event"></handle>
      </div>
      <!-- COMPONENT 构件 -->
      <div
        class="tab-pane fade"
        id="fifthTabContent"
        role="tabpanel"
        aria-labelledby="fifthTab"
      >
        <component-page ref="componentComponent" :search-query="searchQuery" @update:search-query="searchQuery = $event"></component-page>
      </div>
    </div>

    <!-- Action Modal -->
    <action-modal
      :modal-title="modalTitle"
      :edit-title="editTitle"
      :edit-action="editAction"
      :modal-message="modalMessage"
      :modal-action0="modalAction0"
      :modal-action1="modalAction1"
      :modal-action2="modalAction2"
    ></action-modal>

    <!-- Notice Message -->
    <message-modal
      :notice-type="noticeType"
      :notice-message="noticeMessage"
      @cancelDeepSearch="cancelDeepSearch"
    ></message-modal>
  </div>
  
  <script src="../js/model.js"></script>
  <script src="../js/material.js"></script>
  <script src="../js/door.js"></script>
  <script src="../js/handle.js"></script>
  <script src="../js/component.js"></script>
  <script src="../js/main.js"></script>
</body>
</html>