<template>
  <main class="entry-page">
    <section class="section">
      <div class="section-why-text">
        <h1 class="main-title">{{ $t('pages.share_pictures.title') }}</h1>
        <p class="why-description">
          {{ $t('pages.share_pictures.description') }}
        </p>
      </div>
      <div class="section-why-img">
        <img
          src="@/assets/images/how-to-share-map.jpg"
          :alt="$t('pages.share_pictures.alt_img_map')"
          class="img-why"
        />
      </div>
    </section>
    <section class="section section-features">
      <ul class="card-list">
        <li class="card-item">
          <Card
            :title="$t('pages.share_pictures.card_photo1')"
            :description="$t('pages.share_pictures.card_description1')"
            img-src="building.svg"
            :img-alt="$t('pages.share_pictures.card_alt_photo1')"
          />
        </li>
        <li class="card-item">
          <Card
            :title="$t('pages.share_pictures.card_photo2')"
            :description="$t('pages.share_pictures.card_description2')"
            img-src="360.svg"
            :img-alt="$t('pages.share_pictures.card_alt_photo2')"
          />
        </li>
        <li class="card-item">
          <Card
            :title="$t('pages.share_pictures.card_photo3')"
            :description="$t('pages.share_pictures.card_description3')"
            img-src="photos.svg"
            :img-alt="$t('pages.share_pictures.card_alt_photo3')"
          />
        </li>
        <li class="card-item">
          <Card
            :title="$t('pages.share_pictures.card_photo4')"
            :description="$t('pages.share_pictures.card_description4')"
            img-src="cloud.svg"
            :img-alt="$t('pages.share_pictures.card_alt_photo4')"
          />
        </li>
      </ul>
    </section>
    <div class="wrapper-section">
      <section class="section">
        <h2 class="subtitle">
          {{ $t('pages.share_pictures.upload_subtitle') }}
        </h2>
        <div class="wrapper-illustration">
          <img
            src="@/assets/images/upload-illustration.svg"
            :alt="$t('pages.share_pictures.upload_illustration_alt')"
          />
        </div>
        <p>{{ $t('pages.share_pictures.upload_description') }}</p>
        <div class="upload-button">
          <Link
            :text="$t('pages.share_pictures.upload_button')"
            :route="{ name: 'upload-pictures' }"
            look="button button--blue"
          />
        </div>
      </section>
      <section class="section">
        <h2 class="subtitle">
          {{ $t('pages.share_pictures.command_line_subtitle') }}
        </h2>
        <Terminal
          :text-upload="terminalText"
          :text-install="$t('pages.share_pictures.terminal_install')"
        />
        <p
          class="upload-text"
          v-html="$t('pages.share_pictures.description_terminal')"
        ></p>
      </section>
    </div>
    <div class="wrapper-section">
      <section class="section">
        <h2 class="subtitle">
          {{ $t('pages.share_pictures.information_subtitle') }}
        </h2>
        <div class="icon-block">
          <img
            src="@/assets/images/icon/check-green.svg"
            alt=""
            class="icon-block-img"
          />
          <span>{{ $t('pages.share_pictures.information_text1') }}</span>
        </div>
        <License
          v-if="authConf && authConf.license && authConf.license.url"
          :url="authConf.license.url"
          :text="authConf.license.id"
        >
          <img
            src="@/assets/images/icon/check-green.svg"
            alt=""
            class="icon-block-img"
          />
        </License>
        <div class="icon-block">
          <img
            src="@/assets/images/icon/check-green.svg"
            alt=""
            class="icon-block-img"
          />
          <span>{{ $t('pages.share_pictures.information_text3') }}</span>
        </div>
        <div class="entry-information-card">
          <InformationCard
            :title="$t('pages.share_pictures.information_about_title')"
            :text="formatTextInfoCard"
            look="blue"
          />
        </div>
      </section>
      <section class="section">
        <h3 class="about-subtitle">
          {{ $t('pages.share_pictures.doc_subtitle') }}
        </h3>
        <p class="doc-description">
          {{ $t('pages.share_pictures.doc_description') }}
        </p>
        <div class="button-block">
          <div class="doc-button">
            <Link
              :text="$t('pages.share_pictures.doc_button')"
              type="external"
              target="_blank"
              path-external="https://forum.geocommuns.fr/t/les-tutoriels-pour-contribuer-a-panoramax/"
              look="button button--white-blue"
            />
          </div>
          <div class="wrapper-doc-illustration">
            <img
              src="@/assets/images/doc-illustration.png"
              :alt="$t('pages.share_pictures.doc_illustration_alt')"
              class="doc-illustration"
            />
          </div>
        </div>
      </section>
    </div>
  </main>
</template>

<script lang="ts" setup>
import Link from '@/components/Link.vue'
import Terminal from '@/components/Terminal.vue'
import Card from '@/components/share-pictures/Card.vue'
import InformationCard from '@/components/InformationCard.vue'
import License from '@/components/License.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import authConfig from '../composables/auth'
const { t } = useI18n()
const { authConf } = authConfig()

const apiUrl = computed((): string =>
  import.meta.env.VITE_API_URL
    ? import.meta.env.VITE_API_URL
    : 'https://panoramax.ign.fr/'
)

const formatTextInfoCard = computed((): string => {
  return t('pages.share_pictures.information_about_description', {
    docLink: `${apiUrl.value}api/docs/swagger`,
    docTiles: `${apiUrl.value}api/docs/swagger#/Map/get_api_map__z___x___y___format_`
  })
})
const terminalText = computed((): string =>
  t('pages.share_pictures.terminal_text', { url: apiUrl.value })
)
</script>

<style lang="scss" scoped>
h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}
.entry-page {
  background-color: var(--grey);
  color: var(--grey-dark);
  padding: toRem(2) toRem(5) toRem(5);
  @include text(m-r-regular);
}
.section {
  display: flex;
  background-color: var(--white);
  border-radius: toRem(2.2);
  padding: toRem(4);
  margin-bottom: toRem(2);
}
.wrapper-section {
  display: flex;
  .section {
    width: 50%;
    flex-direction: column;
  }
  .section:first-child {
    margin-right: toRem(2);
  }
}
.section-why-text {
  display: flex;
  flex-direction: column;
  margin-right: toRem(2);
  width: 60%;
}
.section-why-img {
  display: flex;
  justify-content: center;
  width: 40%;
}
.img-why {
  object-fit: contain;
}
.main-title {
  @include text(h1);
  color: var(--blue-dark);
  margin-bottom: toRem(2);
}
.why-description {
  white-space: break-spaces;
}
.card-list {
  display: flex;
}
.card-item {
  width: 25%;
  &:nth-child(2) {
    margin-right: toRem(4);
    margin-left: toRem(4);
  }
  &:nth-child(4) {
    margin-left: toRem(4);
  }
}
.wrapper-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--blue-pale);
  border: toRem(0.1) dashed var(--blue);
  border-radius: toRem(2.2);
  padding: toRem(4);
  margin-bottom: toRem(3);
  height: 100%;
  img {
    height: toRem(20);
  }
}
.subtitle {
  @include text(h2);
  color: var(--blue-dark);
  margin-bottom: toRem(2);
}
.upload-button {
  display: flex;
  margin-top: toRem(4);
}
.upload-text {
  white-space: pre-wrap;
  @include text(m-r-regular);
  margin-top: toRem(5);
}
.entry-information-card {
  margin-top: toRem(2);
}
.icon-block {
  display: flex;
  align-items: center;
}
.icon-block-img {
  height: toRem(2);
  margin-right: toRem(0.5);
}
.about-subtitle {
  @include text(h2);
  color: var(--blue-dark);
}
.doc-description {
  margin-top: toRem(3);
}
.button-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  flex-wrap: wrap-reverse;
}
.doc-button {
  margin-right: toRem(2);
  width: fit-content;
}
.wrapper-doc-illustration {
  display: flex;
  justify-content: flex-end;
}
.doc-illustration {
  width: fit-content;
}
@media (max-width: toRem(102.4)) {
  .card-list {
    flex-wrap: wrap;
  }
  .card-item {
    width: calc(50% - #{toRem(2)});
    &:nth-child(2),
    &:nth-child(1) {
      margin-right: toRem(0);
      margin-bottom: toRem(4);
    }
  }
  .button-block {
    flex-direction: column-reverse;
    justify-content: center;
  }
  .doc-button {
    margin-top: toRem(2);
    margin-right: 0;
  }
}
@media (max-width: toRem(84.8)) {
  .section {
    flex-direction: column;
  }
  .section-why-text {
    width: 100%;
    margin-right: 0;
  }
  .section-why-img {
    margin-top: toRem(2);
    width: 100%;
  }
}
@media (max-width: toRem(76.8)) {
  .entry-page {
    padding-top: toRem(15);
  }
  .card-item {
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4) {
      margin: 0 0 toRem(4);
    }
    width: 100%;
  }
  .wrapper-card {
    align-items: center;
  }
  .wrapper-section {
    flex-direction: column;
    .section {
      width: 100%;
    }
  }
  .doc-button {
    margin-top: toRem(2);
  }
}
@media (max-width: toRem(50)) {
  .entry-page,
  .section {
    padding-right: toRem(2);
    padding-left: toRem(2);
  }
  .section {
    padding-top: toRem(2);
    padding-bottom: toRem(2);
  }
  .img-why {
    width: 100%;
  }
  .card-item:last-child {
    margin-bottom: 0;
  }
  .wrapper-illustration {
    img {
      max-height: toRem(10);
    }
  }
  .upload-button {
    margin-top: toRem(2);
    width: 100%;
  }
  .doc-button {
    width: 100%;
  }
  .doc-description {
    margin-top: toRem(1.5);
  }
  .section-why-img {
    height: toRem(14);
  }
}
</style>
