{% import "includes/macros" as macros %}
{% import "includes/forms/log" as log %}

{% extends "base" %}

{% block content %}

<div class="max-w-screen-lg w-full">
  <h1 class="h1">Bootschäden</h1>

  {% if flash %}
    {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3 mt-3") }}
  {% endif %}

  <h2 class="text-md font-bold tracking-wide bg-primary-900 mt-3 p-3 text-white flex justify-between items-center rounded-md">
    Neuen Schaden

    <a href="#" class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"
                data-sidebar="true" data-trigger="sidebar" data-header="Neuen Schaden anlegen" data-body="#new-damage">
      {% include "includes/plus-icon" %}
      <span class="sr-only">Neuen Schaden eintragen</span>
    </a>
  </h2>

  <div class="hidden">
    <div id="new-damage">
      <form action="/boatdamage" method="post" class="grid gap-3">
        {{ log::boat_select(only_ones=false, id='boat') }}
	{% if not loggedin_user %}
		{{ macros::select(label='Gemeldet von', data=user, name='user_id') }}
	{% endif %}
        {{ macros::input(label='Beschreibung des Schadens', name='desc', type='text', required=true, wrapper_class='col-span-4') }}
        <div class="col-span-4">
          {{ macros::checkbox(label='Boot sperren', name='lock_boat', type='text', required=true) }}
        </div>
        <input type="submit" class="btn btn-primary w-full col-span-4" value="Schaden eintragen" />
      </form>
    </div>
  </div>

  <div class="bg-gray-200 p-3 mt-4 rounded-t-md">
    <label for="name" class="sr-only">Suche</label>
    <input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Namen...">
  </div>

  <div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div>

  {% for boatdamage in boatdamages | sort(attribute="verified") %}
    <div data-filterable="true" data-filter="{{ boatdamage.boat.name }} {{ boatdamage.user_created.name }}" class="w-full border-t bg-white p-3 {% if boatdamage.verified_at %} opacity-50 {% endif %}">
      <div class="w-full">
        <strong>{{ boatdamage.created_at | date(format='%d.%m.%Y') }} <span class="font-normal text-gray-600">({{ boatdamage.boat.name }})</span></strong>{% if boatdamage.boat.damage %}<small class="block text-gray-600">(Boot gesperrt)</small>{% endif %}
        <div>{{ boatdamage.desc }}</div>
        <small class="block text-gray-600">
          Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d.%m.%Y (%H:%M)') }}
        </small>

        {% if boatdamage.fixed_at %}
          <small class="block text-gray-600">Repariert von {{ boatdamage.user_fixed.name }} am/um {{ boatdamage.fixed_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
        {% else %}
          {% if loggedin_user.is_cox %}
            <form action="/boatdamage/{{ boatdamage.id }}/fixed" method="post" class="flex justify-between mt-3">
              <input type="text" name="desc" value="{{ boatdamage.desc }}" class="grow input rounded-s" />
              {% if loggedin_user.is_tech %}
                <input type="submit" class="btn btn-primary" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" value="Repariert und verifiziert" />
              {% else %}
                <input type="submit" class="btn btn-primary" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" value="Repariert" />
              {% endif %}
            </form>
          {% endif %}
        {% endif %}
        
        {% if boatdamage.verified_at %}
          <small class="block text-gray-600">Verifziert von {{ boatdamage.user_verified.name }} am/um {{ boatdamage.verified_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
        {% else %}
          {% if loggedin_user.is_tech and boatdamage.fixed_at  %}
            <form action="/boatdamage/{{ boatdamage.id }}/verified" method="post" class="flex justify-between mt-3">
              <input type="text" name="desc" value="{{ boatdamage.desc }}" class="grow input rounded-s"/>
              <input type="submit" class="btn btn-dark" style="border-top-left-radius: 0; border-bottom-left-radius: 0;"  value="Verifiziert" />
            </form>
          {% endif %}
        {% endif %}
      </div>
    </div>
  {% endfor %}
</div>

{% endblock content%}