{% macro new() %}
  <form action="/log" method="post" id="form">
	{{ macros::select(data=boats, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"]) }}
	<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('max_rower_allowed').innerHTML = selectedOption.getAttribute("extra-amount_seats");
          }
          
          document.getElementById('boat_id').addEventListener('change', updateElementsBasedOnSelectedOption);
          document.addEventListener('DOMContentLoaded', updateElementsBasedOnSelectedOption);
	</script>
	{{ macros::select(data=coxes, select_name='shipmaster', selected_id=loggedin_user.id) }}
        {{ macros::checkbox(label='shipmaster_only_steering', name='shipmaster_only_steering') }}
	Departure: <input type="datetime-local" id="datetime-dep" name="departure" required/>
	Arrival: <input type="datetime-local" id="datetime-arr" name="arrival" />
	Destination: <input type="search" 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>
	{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=0) }}
	{{ macros::input(label="Kommentar", name="comments", type="text") }}
	{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
	<select multiple="multiple" name="rower[]" id="rower">
		{% for user in users %}
			<option value="{{ user.id }}" onmousedown="event.preventDefault();this.selected = !this.selected; updateSelectedRowersCount(); return false;" onblur="updateSelectedRowersCount()" onchange="updateSelectedRowersCount()>{{user.name}}</option>
		{% endfor %}
	</select>
	<script>
	  function updateSelectedRowersCount() {
	  	document.getElementById('amount_rower_selected').textContent = document.getElementById('rower').selectedOptions.length+1; 
	  }
	  document.addEventListener('DOMContentLoaded', updateSelectedRowersCount);
	</script>
	<span id="amount_rower_selected"></span>/<span id="max_rower_allowed"></span> Ruderer ausgewählt
	<input type="submit" />
	
	<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("datetime-dep").value = formattedDate;
	</script>
  </form>
  <script>
   document.getElementById('form').addEventListener('submit', function(e) {
     e.preventDefault();
     for(let optional_elem of ["datetime-arr", "distance_in_km", "comments", "logtype"]){
       let myInput = document.getElementById(optional_elem);
       if (myInput.value === '') {
           myInput.removeAttribute('name');
       }
     }
     this.submit();
   });
  </script>
{% endmacro new %}


{% macro show(log, state) %}
    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 %}
    Ziel: {{ log.destination }}<br />
    {% if state == "completed" %}
        Km: {{ log.distance_in_km }}<br />
    {% endif %}
    Kommentare: {{ log.comments }}<br />
    Logtype: {{ log.logtype }}<br />
    Ruderer: 
    {% set amount_rowers = log.rowers | length %}
    {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
    {{ amount_guests }} Gäste (ohne Account)
    {% for rower in log.rowers %}
    	{{ rower.name }}
    {% endfor %}
    {% if log.shipmaster == loggedin_user.id  and state == "on_water" %}
      {{ log::home(log=log) }}
    {% endif %}
{% endmacro show %}    

{% macro home(log) %}
<form action="/log/{{log.id}}" method="post">
        Destination: <input type="search" list="destinations" placeholder="Destination" 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;
            }
          }">
        {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km) }}
        {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
        {{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
        <select multiple="multiple" name="rower[]">
          {% for user in users %}
            {% set_global selected = false %}
            {% for rower in log.rowers %}
                {% if rower.id == user.id %}
              {% set_global selected = true %}
                {% endif %}
            {% endfor %}
            <option value="{{ user.id }}" {% if selected %}selected{% endif %} onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
          {% endfor %}
        </select>
        <input type="submit" value="AUSFAHRT BEENDEN"/>
      </form>
{% endmacro home %}