<script setup>
  import { useModalLoginOpen } from "@layouts/stores/config";
  import moment from "moment";
  import "moment/dist/locale/pt-br";
  import AppQuantityEventos from "@global/components/app-quantity-eventos.vue";
  import imageSkeleton from "@images/skeleton/image-loading.webp";
  import imageNotAvailable from "@images/skeleton/no-image-available.png";
  import noImage from "@images/skeleton/no-image.jpg";

  const { setAlert } = useAlert();
  const modalLoginOpen = useModalLoginOpen();

  const userData = useCookie("userData").value;

  const router = useRouter();
  const route = useRoute();

  const { width: windowWidth } = useWindowSize();
  const isMobile = ref(false);
  isMobile.value = windowWidth.value < 768;

  const loading = ref(true);

  const evento = ref(null);
  const categorias = ref([]);
  const taxa_evento = ref(null);
  const tipo_taxa_evento = ref("porcentagem");

  const isListaConvidados = ref(false);
  const code = ref(null);
  const needCode = ref(true);
  const uuidConfirmacao = ref(false);

  const getTaxa = async () => {
    try {
      const response = await $api("/events/taxas/user/" + evento.value?.id, {
        method: "GET",
      });

      console.log("Resposne taxa", response);

      taxa_evento.value = parseInt(response.user.value);
      tipo_taxa_evento.value = response.user.type;
      loading.value = false;
    } catch (error) {
      console.log("Erro ao buscar taxa de evento", error, error.response);
      loading.value = false;
      taxa_evento.value = 10;
      tipo_taxa_evento.value = "porcentagem";
    }
  };

  const getEvento = async () => {
    if (!router.currentRoute.value.params.slug) {
      router.push("/eventos");
      return;
    }

    try {
      const res = await $api(
        "/events/evento/u/" + router.currentRoute.value.params.slug,
        {
          method: "GET",
          query: {
            userData: JSON.stringify(userData),
          },
        }
      );

      if (!res) return;

      console.log("Evento res:", res);

      evento.value = res;

      isListaConvidados.value = res.type == 25;
      needCode.value = res.type == 25 && res.listaOptions?.hasCode;

      if (res.type == 25 && route.query.confirmacao) {
        uuidConfirmacao.value = route.query.confirmacao;

        needCode.value = false;
      }

      if (evento.value.ingressos) {
        evento.value.ingressos = evento.value.ingressos.filter(
          (ingresso) =>
            !ingresso.agendar ||
            (ingresso.agendar &&
              moment() >
                moment(ingresso.dataAgendar + " " + ingresso.horaAgendar))
        );
        for (let ingresso of evento.value.ingressos) {
          ingresso.buyData = {
            quantity: 0,
            total: 0,
            taxa: 0,
            subtotal: 0,
          };
        }
      }

      await getCategorias();
      await getTaxa();
    } catch (error) {
      console.error("Erro ao buscar evento:", error, error.response);

      router.push("/eventos");
    }

    loading.value = false;
  };

  const getCategorias = async () => {
    try {
      const res = await $api("/events/categorias", {
        method: "GET",
      });

      if (!res) return;

      console.log("res categorias", res);

      categorias.value = res;
    } catch (error) {
      console.error("Erro ao buscar categorias", error, error.response);
      categorias.value = [];
      //setAlert(error?.response?._data?.message || 'Erro ao buscar categorias', 'error', 'tabler-alert-triangle', 6000);
    }
  };

  getEvento();

  const carouselSteps = ref(0);

  const formatValue = (value) => {
    if (!value || value == 0) return "Grátis";

    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(value);
  };

  const calculateTaxa = (value) => {
    if (!value) return 0;

    value = parseFloat(value);

    if (tipo_taxa_evento.value === "porcentagem") {
      return value * (taxa_evento.value / 100);
    }

    return taxa_evento.value;
  };

  const calculateParcelaIngresso = (price, calculateTaxa = true) => {
    if (!price) return "";

    price = parseFloat(price);

    if (calculateTaxa) {
      if (tipo_taxa_evento.value === "porcentagem") {
        price = price + price * (taxa_evento.value / 100);
      } else {
        price = price + taxa_evento.value;
      }
    }

    if (price > 5) {
      //Calcular para o máximo de parcelas onde o valor minimo da parcela seja 5 e no máximo 12 parcelas
      let maxParcelas = Math.floor(price / 5) > 12 ? 12 : Math.floor(price / 5);

      return `em até ${maxParcelas}x de ${formatValue(price / maxParcelas)}`;
    } else {
      return "";
    }
  };

  const total = ref(0);
  const hasIngressos = ref(false);

  const handleBuyIngressos = (value, index) => {
    let preco = parseFloat(evento.value.ingressos[index].price) * value;
    evento.value.ingressos[index].buyData.quantity = value;
    evento.value.ingressos[index].buyData.total = preco + calculateTaxa(preco);
    evento.value.ingressos[index].buyData.taxa = calculateTaxa(preco);
    evento.value.ingressos[index].buyData.subtotal = preco;
    evento.value.ingressos[index].buyData.valueGestor = preco;

    total.value = evento.value.ingressos.reduce(
      (acc, ingresso) => acc + ingresso.buyData.total,
      0
    );

    /*  if (tipo_taxa_evento.value === 'porcentagem') {
             total.value += total.value * (taxa_evento.value / 100)
         } else {
             total.value += taxa_evento.value
         } */

    hasIngressos.value =
      evento.value.ingressos.reduce(
        (acc, ingresso) => acc + ingresso.buyData.quantity,
        0
      ) > 0;
  };

  const goMaps = () => {
    let url = evento.value.enderecoEvento?.urlGoogleMaps;

    if (!url) {
      let query = `${
        evento.value?.enderecoEvento?.place
          ? evento.value?.enderecoEvento?.place + ", "
          : ""
      }${
        evento.value?.enderecoEvento?.street
          ? evento.value?.enderecoEvento?.street + ", "
          : ""
      }${
        evento.value?.enderecoEvento?.number
          ? evento.value?.enderecoEvento?.number + " - "
          : ""
      }${
        evento.value?.enderecoEvento?.complement
          ? evento.value?.enderecoEvento?.complement + ", "
          : ""
      }${
        evento.value?.enderecoEvento?.neighborhood
          ? evento.value?.enderecoEvento?.neighborhood + ", "
          : ""
      }${
        evento.value?.enderecoEvento?.city
          ? evento.value?.enderecoEvento?.city + "/"
          : ""
      }${
        evento.value?.enderecoEvento?.state
          ? evento.value?.enderecoEvento?.state
          : ""
      }`;
      url = `https://www.google.com/maps/search/?api=1&query=${query}`;
    }

    window.open(url, "_blank");
  };

  const getNome = (nome) => {
    if (!nome) return "";

    let primeiroNome = nome.split(" ")[0];
    let segundoNome = nome.split(" ")[1];

    if (!segundoNome) return primeiroNome;

    return primeiroNome + " " + segundoNome;
  };

  const comprar = async () => {
    if (!userData || !userData.id) {
      setAlert(
        "Você precisa estar logado para comprar ingressos.",
        "error",
        "tabler-alert-triangle",
        3000
      );
      modalLoginOpen.isOpen = true;
      return;
    }

    let ingressos = evento.value.ingressos.filter(
      (ingresso) => ingresso.buyData.quantity > 0
    );

    if (ingressos.length === 0) {
      setAlert(
        "Selecione ao menos um ingresso para comprar.",
        "error",
        "tabler-alert-triangle",
        3000
      );
      return;
    }

    for (let ingresso of ingressos) {
      if (
        ingresso.limitarHora &&
        moment(ingresso.podeAteDate + " " + ingresso.podeAteHora) < moment()
      ) {
        setAlert(
          `O ingresso "${ingresso.name}" não está mais disponível para venda.`,
          "error",
          "tabler-alert-triangle",
          3000
        );
        return;
      }

      if (
        ingresso.quantity &&
        ingresso.quantity > 0 &&
        ingresso.quantity <= ingresso.vendidos
      ) {
        setAlert(
          `O ingresso "${ingresso.name}" está esgotado.`,
          "error",
          "tabler-alert-triangle",
          3000
        );
        return;
      }
    }

    // Duplicar ingressos de acordo com a quantidade no buyData
    let ingressosDuplicados = [];
    ingressos.forEach((ingresso) => {
      for (let i = 0; i < ingresso.buyData.quantity; i++) {
        let preco = parseFloat(ingresso.price);
        let taxa = calculateTaxa(preco);
        let total = parseFloat(preco) + parseFloat(taxa);
        let valueGestor = preco;

        ingressosDuplicados.push({
          ...ingresso, // Mantém todas as propriedades do ingresso original
          buyData: {
            ...ingresso.buyData,
            quantity: 1,
            total: total,
            taxa: taxa,
            subtotal: preco,
            valueGestor: valueGestor,
          },
        });
      }
    });

    let valueTotalSemTaxa = ingressosDuplicados.reduce(
      (acc, ingresso) => parseFloat(acc) + parseFloat(ingresso.price),
      0
    );

    let data = {
      evento: evento.value.id,
      ingressos: ingressosDuplicados,
      purchase: {
        total: total.value,
        valorSemTaxa: valueTotalSemTaxa,
        taxa: total.value - valueTotalSemTaxa,
        quantity: ingressosDuplicados.length,
      },
    };

    console.log("Data:", data);

    data = btoa(JSON.stringify(data));

    router.push({ name: "checkout-events", params: { data } });
  };

  const checkCode = async () => {
    if (!code.value) {
      setAlert(
        "Insira um código de acesso",
        "error",
        "tabler-alert-triangle",
        3000
      );
      return;
    }

    try {
      const res = await $api("/events/evento/checkCode", {
        method: "POST",
        body: {
          code: code.value,
          idEvento: evento.value.id,
        },
      });

      if (!res) return;

      needCode.value = false;
      setAlert(
        "Código de acesso verificado com sucesso",
        "success",
        "tabler-check",
        3000
      );
    } catch (error) {
      console.error(
        "Erro ao verificar código de acesso:",
        error,
        error.response
      );
      setAlert(
        error?.response?._data?.message || "Erro ao verificar código de acesso",
        "error",
        "tabler-alert-triangle",
        6000
      );
    }
  };

  const confirmarPresenca = async () => {
    if (!userData || !userData.id) {
      setAlert(
        "Você precisa estar logado para confirmar sua presença!",
        "error",
        "tabler-alert-triangle",
        3000
      );
      modalLoginOpen.isOpen = true;
      return;
    }

    try {
      const res = await $api("/events/evento/confirmarPresenca", {
        method: "POST",
        body: {
          uuid: uuidConfirmacao.value,
          idEvento: evento.value.id,
          userData: JSON.stringify(userData),
        },
      });

      if (!res) return;

      setAlert(
        'Presença confirmada com sucesso! O seu ingresso está em "Meus Ingressos" no seu perfil e também no seu email!',
        "success",
        "tabler-check",
        3000
      );
      router.push("/meus-ingressos");
    } catch (error) {
      console.error("Erro ao confirmar presença:", error, error.response);
      setAlert(
        error?.response?._data?.message || "Erro ao confirmar presença",
        "error",
        "tabler-alert-triangle",
        6000
      );
    }
  };
</script>

<template>
  <template v-if="loading">
    <v-skeleton-loader type="card" v-for="n in 3" :key="n" class="my-3" />
  </template>

  <template v-if="!loading && evento && needCode">
    <VCard>
      <VCardText>
        <h3 class="text-h5 text-primary mb-3">Código de acesso</h3>

        <p class="mb-3">
          Para acessar este evento, você precisa de um código de acesso. Insira
          o código abaixo para continuar. O código pode ter sido enviado pra
          você via email junto com o convite, caso necessário solicite ao
          anfitrião do evento.
        </p>

        <AppTextField
          v-model="code"
          label="Código de acesso"
          outlined
          dense
          placeholder="Insira o código do evento"
        />

        <VBtn color="primary" class="mt-3" @click="checkCode"> Continuar </VBtn>
      </VCardText>
    </VCard>
  </template>

  <template v-if="!loading && evento && !needCode">
    <VCard class="card-imagem-evento" :image="evento.images[0].url ?? noImage">
      <VCardText class="pa-3">
        <VRow class="align-center justify-center">
          <VCol cols="12" md="5">
            <VCarousel
              v-model="carouselSteps"
              hide-delimiters
              :height="!isMobile ? 370 : 280"
              style="position: relative"
              :class="!isMobile ? 'rounded-xl' : 'rounded-lg'"
            >
              <VCarouselItem
                v-for="(image, index) in evento.images"
                :key="index"
                :src="image.url ?? noImage"
                :lazy-src="imageSkeleton"
                :cover="true"
              />

              <template v-slot:prev="{ props }">
                <v-btn
                  variant="elevated"
                  icon
                  @click="props.onClick"
                  size="small"
                  v-if="evento.images.length > 1"
                >
                  <v-icon
                    icon="tabler-caret-left-filled"
                    color="white"
                    size="25"
                  />
                </v-btn>
              </template>
              <template v-slot:next="{ props }">
                <v-btn
                  variant="elevated"
                  icon
                  @click="props.onClick"
                  size="small"
                  v-if="evento.images.length > 1"
                >
                  <v-icon
                    icon="tabler-caret-right-filled"
                    color="white"
                    size="25"
                  />
                </v-btn>
              </template>
            </VCarousel>

            <div
              class="d-flex justify-center mt-2"
              v-if="evento.images.length > 1"
            >
              <v-btn-toggle v-model="carouselSteps" variant="plain">
                <v-btn
                  v-for="(image, index) in evento.images"
                  :key="index"
                  :value="index"
                  height="12"
                  :color="carouselSteps === index ? 'primary' : ''"
                  size="x-small"
                  rounded
                >
                  <!--<v-icon :icon="carouselSteps === index ? 'tabler-circle-filled' : 'tabler-circle'" size="13" />-->
                  <div
                    class="rounded-full"
                    :style="`background-color: ${
                      carouselSteps === index
                        ? 'var(--color-akkiperto)'
                        : '#d1d1d1'
                    }; width: 30px; height: 3px;`"
                  ></div>
                </v-btn>
              </v-btn-toggle>
            </div>
          </VCol>

          <VCol cols="12" md="5">
            <div
              class="d-flex flex-md-column flex-row align-md-start align-center gap-2 mb-2"
            >
              <VChip
                color="primary"
                label
                style="font-size: 14px; width: fit-content !important"
                v-if="evento.distance"
              >
                {{ evento.distance.replace(" ", "") }} de você
              </VChip>

              <VChip
                color="success"
                class="mt-3 mb-2"
                label
                style="font-size: 14px; width: fit-content !important"
              >
                {{ categorias.find((c) => c.id === evento.categoria)?.name }}
              </VChip>
            </div>

            <h2 class="text-h3 text-primary mb-3">
              {{ evento.title }}
            </h2>

            <p class="d-flex mb-3 font-weight-bold">
              <VIcon icon="tabler-calendar" class="mr-1" />
              <template
                v-if="
                  !evento?.dateAte &&
                  !evento?.horaAte &&
                  evento?.date &&
                  evento?.hora
                "
              >
                <span class="text-capitalize">{{
                  moment(evento.date).format("dddd")
                }}</span
                >, {{ moment(evento.date).format("DD") }} de
                <span class="text-capitalize"
                  >&nbsp;{{ moment(evento.date).format("MMM") }}&nbsp;</span
                >
                às {{ evento.hora }}
              </template>

              <template v-if="evento?.dateAte && evento?.horaAte">
                {{ moment(evento.date).format("DD") }} de
                <span class="text-capitalize"
                  >&nbsp;{{ moment(evento.date).format("MMM") }}&nbsp;</span
                >
                até
                {{ moment(evento.dateAte).format("DD") }} de
                <span class="text-capitalize"
                  >&nbsp;{{ moment(evento.dateAte).format("MMM") }}&nbsp;</span
                >
              </template>
            </p>

            <p
              class="d-flex mb-2 cursor-pointer"
              v-if="evento?.enderecoEvento"
              @click="goMaps"
            >
              <VIcon icon="tabler-map-pin" class="mr-1" />
              {{
                evento?.enderecoEvento?.place
                  ? evento?.enderecoEvento?.place + ", "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.street
                  ? evento?.enderecoEvento?.street + ", "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.number
                  ? evento?.enderecoEvento?.number + " - "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.complement
                  ? evento?.enderecoEvento?.complement + ", "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.neighborhood
                  ? evento?.enderecoEvento?.neighborhood + ", "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.city
                  ? evento?.enderecoEvento?.city + "/"
                  : ""
              }}
              {{
                evento?.enderecoEvento?.state
                  ? evento?.enderecoEvento?.state
                  : ""
              }}
            </p>
          </VCol>
        </VRow>
      </VCardText>
    </VCard>

    <VRow :class="`mt-6 ${isMobile ? 'flex-column-reverse' : ''}`">
      <VCol
        cols="12"
        :md="
          !evento.divulgacao ||
          (isListaConvidados && evento.listaOptions?.confirmacao)
            ? 8
            : 12
        "
      >
        <VCard class="mb-8">
          <VCardText>
            <h3 class="text-h5 text-primary mb-3">Descrição</h3>

            <p
              class="div-html-text"
              v-html="evento.description.replace(/<p><br><\/p>/g, '')"
            />
          </VCardText>
        </VCard>

        <VCard class="mb-8" v-if="evento.regulamento">
          <VCardText>
            <h3 class="text-h5 mb-3">Regulamento</h3>

            <p
              class="div-html-text"
              v-html="evento.regulamento.replace(/<p><br><\/p>/g, '')"
            />
          </VCardText>
        </VCard>

        <VCard class="mb-8">
          <VCardText>
            <h3 class="text-h5 mb-3">Local</h3>

            <p class="mb-1 font-weight-bold text-h5">
              {{
                evento.enderecoEvento?.place
                  ? evento.enderecoEvento?.place
                  : evento.enderecoEvento?.street
              }}
            </p>

            <p class="mb-1">
              {{
                evento?.enderecoEvento?.street
                  ? evento?.enderecoEvento?.street + ", "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.number
                  ? evento?.enderecoEvento?.number + " - "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.complement
                  ? evento?.enderecoEvento?.complement + ", "
                  : ""
              }}
              {{
                evento?.enderecoEvento?.neighborhood
                  ? evento?.enderecoEvento?.neighborhood
                  : ""
              }}<br />
              {{
                evento?.enderecoEvento?.city
                  ? evento?.enderecoEvento?.city + "/"
                  : ""
              }}
              {{
                evento?.enderecoEvento?.state
                  ? evento?.enderecoEvento?.state
                  : ""
              }}
            </p>

            <VBtn
              color="primary"
              class="mt-3"
              @click="goMaps"
              variant="outlined"
            >
              <VIcon icon="tabler-brand-google-maps" class="mr-2" />
              <span class="text-none">Ver no mapa</span>
            </VBtn>
          </VCardText>
        </VCard>

        <VCard class="mb-8">
          <VCardText>
            <h3 class="text-h5 mb-4">
              {{ isListaConvidados ? "Anfitrião" : "Promovido por" }}
            </h3>

            <div class="d-flex flex-row gap-2 align-center">
              <VAvatar
                size="45"
                class="mr-2"
                :variant="evento.promotorEvento?.avatar ? undefined : 'tonal'"
                :color="evento.promotorEvento?.avatar ? undefined : 'primary'"
              >
                <VImg
                  :src="evento.promotorEvento?.avatar"
                  v-if="evento.promotorEvento?.avatar"
                  alt="Avatar"
                  cover
                />
                <VIcon icon="tabler-user" size="20" class="primary" v-else />
              </VAvatar>

              <div>
                <p class="mb-1 font-weight-bold text-h5">
                  {{ getNome(evento.promotorEvento?.fullName) }}
                </p>

                <p class="mb-0">
                  <VIcon icon="tabler-mail" class="mr-1" />
                  {{ evento.promotorEvento?.email }}
                </p>
              </div>
            </div>
          </VCardText>
        </VCard>
      </VCol>

      <VCol cols="12" md="4" v-if="!evento.divulgacao && !isListaConvidados">
        <VCard class="position-sticky" style="top: 100px">
          <VCardTitle class="text-center bg-primary text-white">
            Ingressos
          </VCardTitle>

          <VCardText>
            <div class="ingressos pt-3">
              <template
                v-for="(ingresso, index) in evento.ingressos"
                :key="index"
              >
                <VRow class="align-center">
                  <VCol cols="8" md="7" class="px-0">
                    <h4 class="text-h6 text-primary">
                      {{ ingresso.name }}
                    </h4>

                    <p
                      class="mb-0"
                      :class="ingresso.price == 0 ? 'text-success' : ''"
                    >
                      {{ formatValue(ingresso.price) }}
                      <span class="text-caption" v-if="ingresso.price > 0">
                        (+
                        {{ formatValue(calculateTaxa(ingresso.price)) }} taxas)
                      </span>
                    </p>

                    <p class="mb-0 font-weight-bold text-caption">
                      {{ calculateParcelaIngresso(ingresso.price) }}
                    </p>

                    <p
                      class="mb-0 mt-1 text-disabled text-caption"
                      v-if="ingresso.limitarHora"
                    >
                      Vendas até
                      {{
                        moment(
                          ingresso.podeAteDate + " " + ingresso.podeAteHora
                        ).format("DD/MM/YYYY HH:mm")
                      }}
                    </p>
                  </VCol>

                  <VCol cols="4" md="5" class="px-0">
                    <template
                      v-if="
                        (!ingresso.limitarHora ||
                          (ingresso.limitarHora &&
                            moment(
                              ingresso.podeAteDate + ' ' + ingresso.podeAteHora
                            ) > moment())) &&
                        (!ingresso.quantity ||
                          (ingresso.quantity &&
                            ingresso.quantity > 0 &&
                            ingresso.quantity > ingresso.vendidos))
                      "
                    >
                      <AppQuantityEventos
                        :value="ingresso?.buyData?.quantity"
                        @update:value="handleBuyIngressos($event, index)"
                      />
                    </template>

                    <template
                      v-if="
                        (ingresso.limitarHora &&
                          moment(
                            ingresso.podeAteDate + ' ' + ingresso.podeAteHora
                          ) < moment()) ||
                        (ingresso.quantity &&
                          ingresso.quantity > 0 &&
                          ingresso.quantity <= ingresso.vendidos)
                      "
                    >
                      <p class="text-error mb-0 text-center">Esgotado!</p>
                    </template>
                  </VCol>
                </VRow>

                <VDivider class="my-3 w-100" />
              </template>
            </div>

            <div
              class="d-flex align-center justify-space-between mt-3"
              v-if="hasIngressos"
            >
              <p class="mb-0 text-h5">
                {{ total > 0 ? "Total" : "" }}
                <strong>
                  {{ formatValue(total) }}
                </strong>
              </p>

              <p class="mb-0">
                {{ calculateParcelaIngresso(total, false) }}
              </p>
            </div>

            <VBtn
              color="primary"
              class="mt-5 w-100 btn-altura-padrao"
              :disabled="!hasIngressos"
              @click="comprar"
            >
              {{ hasIngressos ? "Comprar Ingressos" : "Selecione ingressos" }}
            </VBtn>
          </VCardText>
        </VCard>
      </VCol>

      <VCol
        cols="12"
        md="4"
        v-if="isListaConvidados && evento.listaOptions?.confirmacao"
      >
        <VCard class="position-sticky" style="top: 100px">
          <!--    <VCardTitle class="text-center bg-primary text-white">
                        Ingressos
                    </VCardTitle> -->

          <VCardText>
            <p class="mb-3 text-center">
              Confirme sua presença no evento para receber o seu ingresso!
              {{
                !uuidConfirmacao
                  ? "Para confirmar, você deve usar o mesmo email que o" +
                    "anfitrião do evento inseriu na lista de convidados."
                  : ""
              }}
            </p>
            <VBtn
              color="primary"
              class="w-100 btn-altura-padrao"
              @click="confirmarPresenca"
            >
              Confirmar Presença
            </VBtn>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </template>
</template>

<style>
  .card-imagem-evento .v-card__image:before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
    z-index: 2;
    background-color: #ffffffe0;
  }

  .card-imagem-evento .v-card__image img {
    filter: blur(5px);
  }
</style>
