<script>
  import { _ } from "svelte-i18n";
  import { StatsService } from "@odit/lfk-client-js";
  import store from "../../store";
  import StatCard from "./StatCard.svelte";
  let navOpen = false;
  const stats_promise = StatsService.statsControllerGet();
</script>

<div class="p-5 overflow-x-hidden">
  <h1 class="text-3xl leading-tight">
    <span class="font-extrabold">{$_("dashboard-title")}</span>
    <span>
      -
      {$_("dashboard-greeting")},
      <span class="text-blue-500"
        >{store.state.jwtinfo.userdetails.firstname}
        {store.state.jwtinfo.userdetails.lastname}</span
      ></span
    >
  </h1>
  <h1>{$_("general-stats")}</h1>
  {#await stats_promise}
    <div
      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
      role="alert"
    >
      <p class="font-bold">{$_("stats-are-being-loaded")}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
  {:then stats}
    <div
      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
    >
      <StatCard
        title={$_("runners")}
        value={stats.total_runners}
        href="/runners/"
      >
        <svg
          height="24"
          width="24"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-scans")}
        value={stats.total_scans}
        href="/scans/"
      >
        <svg
          fill="currentColor"
          width="24"
          height="24"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            fill="currentColor"
            d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-donors")}
        value={stats.total_donors}
        href="/donors/"
      >
        <svg
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-donation-count")}
        value={stats.total_donations}
        href="/donations/"
      >
        <svg
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("average-donation")}
        value={`${(stats.average_donation / 100).toFixed(2)} €`}
        href="/donations/"
      >
        <svg
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-donations")}
        value={`${(stats.total_donation / 100).toFixed(2)} €`}
        href="/donations/"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          fill="currentColor"
          width="24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("total-distance")}
        value={`${stats.total_distance / 1000} km`}
        href="/scans/"
      >
        <svg
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          width="24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("average-distance")}
        value={`${(stats.average_distance / 1000).toFixed(2)} km`}
        href="/scans/"
      >
        <svg
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          height="24"
          width="24"
          ><path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
          /></svg
        >
      </StatCard>
      <StatCard
        title={$_("count_teams")}
        value={stats.total_teams}
        href="/teams/"
      >
        <svg
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          size="24"
          class="stroke-current text-grey-500"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          ><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
          <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
        >
      </StatCard>
      <StatCard
        title={$_("count_organizations")}
        value={stats.total_orgs}
        href="/orgs/"
      >
        <svg
          height="24"
          fill="currentColor"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z"
          /></svg
        >
      </StatCard>
    </div>
  {:catch error}
    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
      <span class="inline-block align-middle mr-8">
        <b class="capitalize">{$_("general_promise_error")}</b>
        {error}
      </span>
    </div>
  {/await}
</div>
