{{- extends "layout/default" }}
{{- import "blocks/underlinenav" }}
{{- block body() }}
<!-- Prefetch links -->
<link rel="prefetch" href="/discovery">

<div class="row justify-content-center g-4">
  <h1 class="mb-0"><i class="bi bi-compass me-2"></i>Discovery</h1>

  <div class="col-12">

    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
      {{- Type := "/discovery/users" }}
      {{- path := slice("/discovery", "/discovery/novel", "/discovery/users") }}
      {{- name := slice("Artworks", "Novels", "Users")}}
      {{- yield UnderlineNav(baseURL="", paths=path, names=name, activeState=Type)}}
      <div class="d-none">
        <p>Artworks</p>
        <p>Novels</p>
        <p>Users</p>
      </div>
    </div>

    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">

    <!-- Main content -->
    <div class="row g-4">
      {{- range .Users }}
        {{- include "fragments/recommendUser" }}
      {{- end }}
    </div>

  </div>

  <div class="d-flex justify-content-center">
    <a href="" class="custom-btn-secondary-flex">Refresh</a>
  </div>

</div>
{{- end }}