{{ 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 p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
      <p class="absolute top-3 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 )}}
      <svg viewBox="26 0 755 {{ $data.Height }}"
           preserveAspectRatio="none"
           width="100%"
           height="4em">
        <!-- 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 }}" />
        {{ range $index, $item := $data.LinePoints }}
        <line class="hover-trigger" stroke="black" stroke-opacity="0.0" stroke-width="{{ $data.Offset }}" x1="{{ $item.X }}" x2="{{ $item.X }}" y1="0" y2="{{ $data.Height }}"></line>
        <g class="hover-item">
        <line class="text-black dark:text-white" stroke-opacity="0.2" x1="{{ $item.X }}" x2="{{ $item.X }}" y1="30" y2="{{ $data.Height }}"></line>
        <text class="text-black dark:text-white" alignment-baseline="middle" transform="translate({{ $item.X }}, 5) translate(-30, 8)" font-size="10">
        {{ (index $.Data.GraphData $index).Date }}
        </text>
        <text class="text-black dark:text-white" alignment-baseline="middle" transform="translate({{ $item.X }}, 25) translate(-30, -2)" font-size="10">
        {{ (index $.Data.GraphData $index).MinutesRead }} minutes
        </text>
        </g>
        {{ end }}
      </svg>
      <style>
        /* Interactive Hover */
        .hover-item {
          visibility: hidden;
          opacity: 0;
        }

        .hover-trigger:hover+.hover-item,
        .hover-item:hover {
          visibility: visible;
          opacity: 1;
        }

        /* SVG Component Styling */
        svg text.text-black {
          fill: black;
        }

        svg line.text-black {
          stroke: black;
        }

        @media (prefers-color-scheme: dark) {
          svg text.dark\:text-white {
            fill: white;
          }

          svg line.dark\:text-white {
            stroke: white;
          }
        }
      </style>
    </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 }}