<script lang="ts" setup>
import dayjs from "dayjs";
import AssignComponent from "~/components/dynamic-page/page-component/AssignComponent.vue";
import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentKey } from "@/definitions/enum";

const currentDateTime = ref<string>("");

onMounted(() => {
  currentDateTime.value = dayjs().format("dddd, DD/MM/YYYY, HH:mm");
});
</script>

<template>
  <header id="header" class="main-header">
    <div class="main-header-topbar ">
      <div class="flex items-center !py-3px">
        <time class="text-capitalize text-white text-12px" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
        <div class="main-header-topbar-listag">

        </div>
        <div class="main-header-topbar-infor flex items-center">
          <div>
            <div class="text-white text-12px">
              <span>HOTLINE: </span>
              <a href="tel:0865015015"> 0865.015.015</a>
              <span> - </span>
              <a href="tel:0977456112">0977.456.112</a>
            </div>
          </div>
          <div class="flex items-center">
            <a class="flex" href=""><Icon class="text-12px" name="ic:baseline-facebook" /></a>
            <a class="flex" href=""><Icon class="" name="ion:logo-youtube" /></a>
          </div>
        </div>
      </div>
    </div>
    <div class="main-header-centerbar">
      <div class="flex items-center">
        <div class="main-header-logo">
          <nuxt-link to="/"><img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="logo"></nuxt-link>
        </div>
        <div class="main-header-control">
          <div class="main-header-relations">
            <img src="~/assets/images/tienphong/sinhvien-logo.png" alt="">
            <img src="~/assets/images/tienphong/hht-online-logo.png" alt="">
            <img src="~/assets/images/tienphong/tamviet-logo.png" alt="">
          </div>
          <div class="main-header-navbar">
            <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT']" />
          </div>
        </div>
      </div>
    </div>
    <div class="main-ads">
      <div class="main-ads-container">
        <div class="main-ads-content">
          <img src="~/assets/images/tienphong/main-ads.png" alt="">
        </div>
      </div>
    </div>
    <div class="main-header-control">
      <div class="header-control-container !py-2">
        <div>
          <div class="header-control_tag">
            <label>Xu hướng</label>
          </div>
          <div class="header-control_article">
            <h4>Thư du học sinh: Hoa Học Trò là “cánh cửa thần kỳ” dẫn tớ đến thế giới rộng lớn hơn</h4>
          </div>
          <div class="header-control_control">
            <div>
              <Icon name="material-symbols-light:search" />
            </div>
            <div>
              <img src="http://picsum.photos/1024/600?random=1" width="40" height="40" class="rounded-circle" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<style lang="scss" scoped>
.main-header {
  .main-header-topbar {
    background: #ED1C24;
    >div {
      max-width: 1385px;
      padding: 5px 15px;
      margin: 0 auto;
      justify-content: space-between;
    }

    .main-header-topbar-listag {
      flex: 1;
    }

    .main-header-topbar-infor {
      gap: 30px;
      a {
        color: #ffffff;
        padding: 0 6px;
        svg {
          font-size: 20px;
        }
      }
    }
  }
  .main-header-centerbar {
    padding: 20px 0px;
    > div {
      max-width: 1385px;
      margin: 0 auto;
      padding: 0px 15px;
    }
    .main-header-control {
      flex: 1;
      .main-header-relations {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
      }
    }
    .main-header-navbar {
      margin-top: 20px;
    }
  }
  .main-ads {
    max-width: 1385px;
    margin: 0px auto;
    padding: 20px 0px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;

    .main-ads-content {
      width: 970px;
      height: 250px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
  }
  .main-header-control {
    .header-control-container {
      max-width: 1385px;
      margin: 0px auto 10px auto;
      padding: 10px 0px;
      border-bottom: 1px solid #000000;
      > div {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-left: 12px;
      }
    }

    .header-control {
      &_tag {
        position: relative;
        height: 30px;
        label {
          font-size: 12px; 
          text-transform: uppercase;
          padding: 0 16px 0 12px;
          display: flex;
          align-items: center; 
          height: 100%; 
          margin: 0; 
          border: 1px solid #000; 
          line-height: 1.8; 
          font-weight: 300; 
        }
        &::after { 
          position: absolute; 
          content: ""; 
          display: block; 
          width: 12px; 
          height: 100%; 
          background-color: #ed1c24; 
          left: -12px; 
          top: 0; 
        } 
      }
      &_article {
        flex: 1;
        h4 {
          font-size: 16px;
          font-weight: 700;
          margin: 0;
        }
      }
      &_control {
        display: flex;
        align-items: center;
        gap: 20px;
        svg {
          font-size: 36px;
        }

        img {
          width: 32px;
          height: 32px;
          object-fit: cover;
          border-radius: 999px;
        }
      }
    }
  }
}
</style>