<script>
  // make dynamic date to be added to footer
  let date = new Date().getFullYear();
</script>

<footer class="relative bg-blueGray-200 pt-8 pb-6">
  <div
    class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
    style="transform: translateZ(0);"
  >
    <svg
      class="absolute bottom-0 overflow-hidden"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="none"
      version="1.1"
      viewBox="0 0 2560 100"
      x="0"
      y="0"
    >
      <polygon
        class="text-blueGray-200 fill-current"
        points="2560 0 2560 100 0 100"
      ></polygon>
    </svg>
  </div>
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap text-center lg:text-left">
      <div class="w-full lg:w-6/12 px-4">
        <h5 class="text-2xl font-semibold">กองสรรหาบุคคล</h5>
        <h6 class="text-md mt-1 mb-2 text-blueGray-600">
          173  ถนนดินสอ  แขวงเสาชิงช้า  เขตพระนคร กรุงเทพมหานคร  10200
        </h6>
        <div class="mt-6 lg:mb-0 mb-6">
          
          <button
            class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
            type="button"
          >
            <i class="fab fa-facebook-square"></i>
          </button>
          <button
            class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
            type="button"
          >
            <i class="fab fa-dribbble"></i>
          </button>
        </div>
      </div>
      <div class="w-full lg:w-6/12 px-4">
        <div class="flex flex-wrap items-top mb-6">
          <div class="w-full lg:w-4/12 px-4 ml-auto">
            <span
              class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
            >
              ส่วนราชการ
            </span>
            <ul class="list-none">
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="https://webportal.bangkok.go.th/KSB"
                  target="_blank"
                >
                  กองสรรหาบุคคล
                </a>
              </li>
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="https://webportal.bangkok.go.th/pdbma"
                  target="_blank"
                >
                กองพัฒนาระบบราชการ
                </a>
              </li>
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="https://webportal.bangkok.go.th/csc_personal"
                  target="_blank"
                >
                กองอัตรากำลัง
                </a>
              </li>
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="http://203.155.220.238/csc/index.php/en/discipline-morality"
                  target="_blank"
                >
                กองทะเบียนประวัติข้าราชการ
                </a>
              </li>
            </ul>
          </div>
          <div class="w-full lg:w-4/12 px-4">
            <span
              class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
            >
            หน่วยงาน
            </span>
            <ul class="list-none">
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="https://main.bangkok.go.th/"
                  target="_blank"
                >
                กรุงเทพมหานคร
                </a>
              </li>
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="https://webportal.bangkok.go.th/pdd"
                  target="_blank"
                >
                สนป.กทม./กองการเจ้าหน้าที่
                </a>
              </li>
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="https://webportal.bangkok.go.th/bangkokeducation"
                  target="_blank"
                >
                สำนักการศึกษา กทม.
                </a>
              </li>
              <li>
                <a
                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                  href="https://www.ocsc.go.th/"
                  target="_blank"
                >
                สำนักงาน ก.พ.
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <hr class="my-6 border-blueGray-300" />
    <div class="flex flex-wrap items-center md:justify-between justify-center">
      <div class="w-full md:w-4/12 px-4 mx-auto text-center">
        <div class="text-sm text-blueGray-500 font-semibold py-1">
          Copyright © {date}  bangkok.go.th/ksb  All rights reserved.
        </div>
      </div>
    </div>
  </div>
</footer>
