{% macro new(only_ones, allow_any_shipmaster, shipmaster) %}
  <form action="/log" method="post" id="form" class="grid grid-cols-2 gap-3">
  	{{ log::boat_select(only_ones=only_ones) }}

	  {% if allow_any_shipmaster %}
	    <select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
	      <optgroup label="Steuerleute">
	      	{% for cox in coxes %}
                     <option value="{{ cox.id }}" {% if cox.id == shipmaster%} selected {% endif %}>{{ cox.name }}</option>
	             {% endfor %}
	      </optgroup>
	      <optgroup label="Mitglieder">
	      	{% for user in users | filter(attribute="is_cox", value=false) %}
                     <option value="{{ user.id }}" {% if user.id == shipmaster%} selected {% endif %}>{{ user.name }}</option>
	             {% endfor %}
	      </optgroup>
            </select>
	 {% else %}
	 	<input type="hidden" name="shipmaster" value="{{shipmaster}}" />
	 {% endif %}
	{% if not only_ones %}
          {{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering') }}
	{% endif %}
	
	{% if not only_ones %}
		{{ log::rower_select(id="newrower", selected=[], class="col-span-2") }}
	{% endif %}

  <div></div>

  {{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true) }}
  {{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local') }}

	<div>
    <label for="destination" class="small text-gray-600">Ziel</label>
	  <input type="search" class="input rounded-md" list="destinations" placeholder="Destination" name="destination" id="destination" oninput="var inputElement = document.getElementById('destination');
  var dataList = document.getElementById('destinations');
  var selectedValue = inputElement.value;
  for (var i = 0; i < dataList.options.length; i++) {
    if (dataList.options[i].value === selectedValue) {
      var distance = dataList.options[i].getAttribute('distance');
      document.getElementById('distance_in_km').value = distance;
      break;
    }
  }">
	<datalist id="destinations">
        {% for distance in distances %}
  		<option value="{{ distance.0 }}" distance={{ distance.1 }} />
        {% endfor %}
	</datalist>
  </div>

  <div class="relative">
  	{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=1) }}
    <span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
  </div>
	{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-2") }}

  <div class="col-span-2">
    <label for="logtype" class=" small text-gray-600 ">Typ</label>
  	{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
  </div>
	<input type="submit" value="Ausfahrt starten" class="btn btn-primary w-full col-span-2 m-auto" />
	
	<script>
  const currentDate = new Date();
  const localTime = new Date(currentDate.getTime() - (currentDate.getTimezoneOffset() * 60000));
  const formattedDate = localTime.toISOString().slice(0, 16);

  // Set the formatted string as the value of the input field
  document.getElementById("departure").value = formattedDate;
	</script>
  </form>

  <script src="/public/js/multiselect-dropdown.js" ></script>
  <script>
   document.getElementById('form').addEventListener('submit', function(e) {
     e.preventDefault();
     for(let optional_elem of ["arrival", "distance_in_km", "comments", "logtype"]){
       let myInput = document.getElementById(optional_elem);
       if (myInput.value === '') {
           myInput.removeAttribute('name');
       }
     }
     this.submit();
   });
  </script>
{% endmacro new %}

{% macro show_boats(only_ones) %}
	  {% if only_ones %}
	  	{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
	{% endif %}
      {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
        <div class="pb-2">
           <div class="bg-gray-100 text-primary-950 text-center text-sm mb-2">
              <strong>{{ amount_seats }}x</strong>
            </div>
            {% for boat in grouped_boats %}
                <div id="boat-{{ boat.id }}" {% if boat.damage != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %} class="px-3">
                  <span class="status-damage status-damage-{{ boat.damage }}"></span>
                  <span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
                </div>
            {% endfor %}
          </div>
        {% endfor %}
        
	<script>
          function updateElementsBasedOnSelectedOption() {
            var selectElement = document.getElementById('boat_id');
            var selectedOption = selectElement.selectedOptions[0];
            var shipmaster_only_steering = selectedOption.getAttribute("extra-default_shipmaster_only_steering") === 'true';
            document.getElementById('shipmaster_only_steering').checked = shipmaster_only_steering;
            document.getElementById('newrower-max_rower_allowed').innerHTML = selectedOption.getAttribute("extra-amount_seats");

            console.log(selectElement.selectedOptions[0]);
          }
          
          document.addEventListener('DOMContentLoaded', function() {
             document.getElementById('boat_id').addEventListener('change', updateElementsBasedOnSelectedOption);
          });
          document.addEventListener('DOMContentLoaded', updateElementsBasedOnSelectedOption);
	</script>
{% endmacro boats %}

{% macro boat_select(only_ones) %}
	  {% if not only_ones %}
		  {{ macros::select(data=boats, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
	  {% else %}
	  	{% set ones = boats | filter(attribute="amount_seats", value=1) %}
		  {{ macros::select(data=ones, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
	  {% endif %}
	<script>
          function updateElementsBasedOnSelectedOption() {
            var selectElement = document.getElementById('boat_id');
            var selectedOption = selectElement.selectedOptions[0];
            var shipmaster_only_steering = selectedOption.getAttribute("extra-default_shipmaster_only_steering") === 'true';
            document.getElementById('shipmaster_only_steering').checked = shipmaster_only_steering;
            document.getElementById('newrower-max_rower_allowed').innerHTML = selectedOption.getAttribute("extra-amount_seats");
          }
          
          document.getElementById('boat_id').addEventListener('change', updateElementsBasedOnSelectedOption);
          document.addEventListener('DOMContentLoaded', updateElementsBasedOnSelectedOption);
	</script>
{% endmacro boat_select %}

{% macro show(log, state, allowed_to_close=false, only_ones) %}
    <div class="grid grid-cols-1 gap-3 mb-3 w-full">
      <div class="pt-2 px-3 {% if not loop.first %} border-t {% endif %}">
        <div class="w-full">
          <div class="flex justify-between">
            <div>
              <strong class="text-primary-900">
                {{ log.departure_timestamp | date(format="%H:%M") }} Uhr 
              </strong> 
              <small class="text-gray-600">({{ log.boat.name }})</small>
            </div>
            
            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
              Details
            </a>
          </div>
        
          <div>
            {% if allowed_to_close and state == "on_water" %}
            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
              Beenden
            </a>
            {% endif %}
          </div>

        <div class="hidden">
            {% if allowed_to_close and state == "on_water" %}
            <div id="close{{ log.id }}">
              {{ log::home(log=log, only_ones=only_ones) }}
            </div>
            {% endif %}
            <div id="log{{ log.id }}">
              {% if log.destination %} 
                {{ log.destination }}
              {% endif %}
              
              {% for cox in coxes %}
                  {% if cox.id == log.shipmaster %}
                    <p>
                      <strong>{{ cox.name }}</strong>
                    </p>
                  {% endif %}
              {% endfor %}

              {% for rower in log.rowers %}
                <p>{{ rower.name }}</p>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
{% endmacro show %}    

{% macro show_old(log, state, allowed_to_close=false, only_ones) %}
    Bootsname: {{ log.boat.name }}<br />
    Schiffsführer: {{ log.shipmaster_user.name }}<br />
    {% if log.shipmaster_only_steering %}
      Schiffsführer steuert nur
    {% endif %}
    Weggefahren: {{ log.departure }}<br />
    {% if state == "completed" %}
        Angekommen: {{ log.arrival}}<br />
    {% endif %}
    {% set amount_rowers = log.rowers | length %}
    {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
    {% if allowed_to_close and state == "on_water" %}
      {{ log::home(log=log, only_ones=only_ones) }}
    {% else %}
      Ziel: {{ log.destination }}<br />
      {% if state == "completed" %}
          Km: {{ log.distance_in_km }}<br />
      {% endif %}
      {% if log.comments %}
        Kommentare: {{ log.comments }}<br />
      {% endif %}
      {% if log.logtype %}
	Logtype: {{ log.logtype }}<br />
      {% endif %}
      {% if amount_guests > 0 or log.rowers | length > 0 %}
      Ruderer: 
      {% endif %}
      {% if amount_guests > 0 %}
              {{ amount_guests }} Gäste (ohne Account)
      {% endif %}
      {% for rower in log.rowers %}
      	{{ rower.name }}
      {% endfor %}
    {% endif %}
{% endmacro show_old %}    

{% macro home(log, only_ones) %}
<form class="grid grid-cols-1 gap-3" action="/log/{{log.id}}" method="post">
    {% if not only_ones %}
      
    {% endif %}
    <div class="relative">
        <label for="destination" class="small text-gray-600">Ziel</label>
        <input class="input rounded-md" type="search" list="destinations" placeholder="Destination" required="required", id="destination-home" name="destination" value="{{log.destination}}" oninput="var inputElement = document.getElementById('destination-home');
          var dataList = document.getElementById('destinations');
          var selectedValue = inputElement.value;
          for (var i = 0; i < dataList.options.length; i++) {
            if (dataList.options[i].value === selectedValue) {
              var distance = dataList.options[i].getAttribute('distance');
              document.getElementById('distance_in_km_home').value = distance;
              break;
            }
          }">
    </div>

    <div class="relative">
      {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
      <span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
    </div>
  
    {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}

    <div>
      <label for="logtype" class=" small text-gray-600 ">Typ</label>
      {{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
    </div>
        <input class="btn btn-primary" type="submit" value="Ausfahrt beenden"/>
      </form>
{% endmacro home %}    


{% macro rower_select(id, selected, amount_seats='', class='') %}
  <div class="{{ class }}">
    <select multiple="multiple" name="rower[]" multiselect-search="true" multiselect-max-items="8" id="{{id}}" onclick="updateSelectedRowersCount{{id}}()" onblur="updateSelectedRowersCount{{id}}()" class="w-full">
      {% for user in users %}
        {% set_global sel = false %}
        {% for rower in selected %}
          {% if rower.id == user.id %}
            {% set_global sel = true %}
          {% endif %}
        {% endfor %}
        <option value="{{ user.id }}" {% if sel %}selected{% endif %} onmousedown="event.preventDefault();this.selected = !this.selected; return false;">{{user.name}}</option>
      {% endfor %}
    </select>
    <script>
      function updateSelectedRowersCount{{id}}() {
        document.getElementById('{{id}}-amount_rower_selected').textContent = document.getElementById('{{id}}').selectedOptions.length+1; 
      }
      document.addEventListener('DOMContentLoaded', updateSelectedRowersCount{{id}});
    </script>
  </div>
  
  <div>
    <span id="{{id}}-amount_rower_selected"></span>/<span id="{{id}}-max_rower_allowed">{{amount_seats}}</span> Ruderer ausgewählt
  </div>
{% endmacro rower_select %}