<% content_for :title, "Visits" %>

<div class="w-full my-5">
  <div role="tablist" class="tabs tabs-lifted tabs-lg">
    <%= link_to 'Visits', visits_path(status: :confirmed), role: 'tab', class: "tab font-bold text-xl #{active_visit_places_tab?('visits')}" %>
    <%= link_to 'Places', places_path, role: 'tab', class: "tab font-bold text-xl #{active_visit_places_tab?('places')}" %>
  </div>

  <div class="flex justify-between">
    <div role="tablist" class="tabs tabs-boxed">
      <%= link_to 'Confirmed', visits_path(status: :confirmed), role: 'tab',
          class: "tab #{active_tab?(visits_path(status: :confirmed))}" %>
      <%= link_to visits_path(status: :suggested), role: 'tab',
          class: "tab #{active_tab?(visits_path(status: :suggested))}" do %>
          Suggested
          <% if @suggested_visits_count.positive? %>
            <span class="badge badge-sm badge-primary mx-1"><%= @suggested_visits_count %></span>
          <% end %>
      <% end %>
      <%= link_to 'Declined', visits_path(status: :declined), role: 'tab',
          class: "tab #{active_tab?(visits_path(status: :declined))}" %>
    </div>
    <div class="flex items-center">
      <span class="mr-2">Order by:</span>
      <%= link_to 'Newest', visits_path(order_by: :desc, status: params[:status]), class: 'btn btn-xs btn-primary mx-1' %>
      <%= link_to 'Oldest', visits_path(order_by: :asc, status: params[:status]), class: 'btn btn-xs btn-primary mx-1' %>
    </div>
  </div>

  <div role="alert" class="alert mt-5">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      class="stroke-info h-6 w-6 shrink-0">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <span>Visits suggestion feature is currently in beta stage. Expect bugs and problems and don't hesitate to report them to <a href='https://github.com/Freika/dawarich/issues' class='link'>Github Issues</a>.</span>
  </div>

  <% if @visits.empty? %>
    <div class="hero min-h-80 bg-base-200">
      <div class="hero-content text-center">
        <div class="max-w-md">
          <h1 class="text-5xl font-bold">Hello there!</h1>
          <p class="py-6">
            Here you'll find your <%= params[:status] %> visits, but now there are none. Create some areas on your map and pretty soon you'll see visit suggestions on this page!
          </p>
        </div>
      </div>
    </div>
  <% else %>
    <div class="flex justify-center my-5">
      <div class='flex'>
        <%= paginate @visits %>
      </div>
    </div>

    <ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
      <% @visits.each do |visit| %>
        <li>
          <div class="timeline-middle">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="<%= visit.confirmed? ? 'green' : 'currentColor' %>"
              class="h-5 w-5">
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                clip-rule="evenodd" />
            </svg>
          </div>
          <div class="timeline-start md:text-end">
            <time class="font-mono italic"><%= visit.started_at.strftime('%A, %d %B %Y') %></time>
          </div>
          <div class="timeline-end md:text-end">
            <%= render partial: 'visit', locals: { visit: visit } %>
          </div>
          <hr />
        </li>
      <% end %>
    </ul>
  <% end %>
</div>
