{{ template "base" . }}
{{ define "title" }}Home{{ end }}
{{ define "header" }}<a href="./">Home</a>{{ end }}
{{ define "content" }}
<div class="flex flex-col gap-4">
  <div class="w-full">
    <div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
      <p class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
        Daily Read Totals
      </p>
      {{ $data := (getSVGGraphData .Data.GraphData 800 70 )}}
      <div class="relative">
        <svg viewBox="26 0 755 {{ $data.Height }}"
             preserveAspectRatio="none"
             width="100%"
             height="6em">
          <!-- Bezier Line Graph -->
          <path fill="#316BBE" fill-opacity="0.5" stroke="none" d="{{ $data.BezierPath }} {{ $data.BezierFill }}" />
          <path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
        </svg>
        <div class="flex absolute w-full h-full top-0"
             style="width: calc(100%*31/30);
                    transform: translateX(-50%);
                    left: 50%">
          {{ range $index, $item := $data.LinePoints }}
          <!-- Required for iOS "Hover" Events (onclick) -->
          <div onclick
               class="opacity-0 hover:opacity-100 w-full"
               style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%">
            <div class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
                 style="transform: translateX(-50%);
                        background-color: rgba(128, 128, 128, 0.2);
                        left: 50%">
              <span>{{ (index $.Data.GraphData $index).Date }}</span>
              <span>{{ (index $.Data.GraphData $index).MinutesRead }} minutes</span>
            </div>
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
  <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
    <a href="./documents" class="w-full">
      <div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
        <div class="flex flex-col justify-around dark:text-white w-full text-sm">
          <p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.DocumentsSize }}</p>
          <p class="text-sm text-gray-400">Documents</p>
        </div>
      </div>
    </a>
    <a href="./activity" class="w-full">
      <div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
        <div class="flex flex-col justify-around dark:text-white w-full text-sm">
          <p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.ActivitySize }}</p>
          <p class="text-sm text-gray-400">Activity Records</p>
        </div>
      </div>
    </a>
    <a href="./progress" class="w-full">
      <div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
        <div class="flex flex-col justify-around dark:text-white w-full text-sm">
          <p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.ProgressSize }}</p>
          <p class="text-sm text-gray-400">Progress Records</p>
        </div>
      </div>
    </a>
    <div class="w-full">
      <div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
        <div class="flex flex-col justify-around dark:text-white w-full text-sm">
          <p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.DevicesSize }}</p>
          <p class="text-sm text-gray-400">Devices</p>
        </div>
      </div>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    {{ range $item := .Data.Streaks }}
    <div class="w-full">
      <div class="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
        <p class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
          {{ if eq $item.Window "WEEK" }}
          Weekly Read Streak
        {{ else }}
          Daily Read Streak
          {{ end }}
        </p>
        <div class="flex items-end my-6 space-x-2">
          <p class="text-5xl font-bold text-black dark:text-white">{{ $item.CurrentStreak }}</p>
        </div>
        <div class="dark:text-white">
          <div class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200">
            <div>
              <p>
              {{ if eq $item.Window "WEEK" }} Current Weekly Streak {{ else }}
                Current Daily Streak {{ end }}
              </p>
              <div class="flex items-end text-sm text-gray-400">
                {{ $item.CurrentStreakStartDate }} ➞ {{ $item.CurrentStreakEndDate }}
              </div>
            </div>
            <div class="flex items-end font-bold">{{ $item.CurrentStreak }}</div>
          </div>
          <div class="flex items-center justify-between pb-2 mb-2 text-sm">
            <div>
              <p>
                {{ if eq $item.Window "WEEK" }}
                Best Weekly Streak
              {{ else }}
                Best Daily Streak
                {{ end }}
              </p>
              <div class="flex items-end text-sm text-gray-400">{{ $item.MaxStreakStartDate }} ➞ {{ $item.MaxStreakEndDate }}</div>
            </div>
            <div class="flex items-end font-bold">{{ $item.MaxStreak }}</div>
          </div>
        </div>
      </div>
    </div>
    {{ end }}
  </div>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
    {{ template "component/leaderboard-card" (dict
    "Name" "WPM"
    "Data" .Data.UserStatistics.WPM
    )}}
    {{ template "component/leaderboard-card" (dict
    "Name" "Duration"
    "Data" .Data.UserStatistics.Duration
    )}}
    {{ template "component/leaderboard-card" (dict
    "Name" "Words"
    "Data" .Data.UserStatistics.Words
    )}}
  </div>
</div>
{{ end }}