Vue.component("ito-footer", {
  props: ["main"],
  template: `<footer class="footer py-4 bg-green font-white">
  <div class="container">
    <div class="row d-flex align-items-center justify-content-between">
      <div class="col-md-6 order-md-0 order-1 logo-box">
        <div class="logo py-3">
          <a :href="[ main ? 'index.html' : '../index.html' ]">
          <img :src="[ main ? '../assets/img/logo.png' : '../../assets/img/logo.png' ]" alt="logo" />
          <span>ITO HOSPITAL</span>
          </a>
        </div>
        <div class="fw-bold">Tokyo, Shibuya-ku, Jingu-mae 4-3-6</div>
        <div class="fw-bold">TEL:<a href="tel:03-3402-7411">03-3402-7411</a></div>
      </div>
      <div class="col-md-5 order-md-1 order-0">
          <span v-for="(item, index) in footerList" :key="index" class="pointer">
            <a :href="[ main ? item.url : '../'+item.url ]" :target="item.blank? '_blank':false">{{item.name}}</a>
            <span v-if="index != footerList.length-1">｜</span>
          </span>
        </div>
    </div>
    <div class="py-3 fw-bold text-center">
      Copyright © Ito Hospital All Rights Reserved.
    </div>
  </div>
</footer>`,
  data() {
    return {
      footerList: [
        {
          name: "About APEC",
          url: "../apec/e-index.html",
          blank: true
        },
        {
          name: "Site map",
          url: "26_sitemap/sitemap.html",
        },
      ],
    };
  },
});