{% extends "base.html.j2" %}

{% block content %}

<h2>Managing poll <span class="contrast">{{ poll.title }}</span> by <i>{{ poll.author_name }}</i></h2>
<p>{{ poll.pub_date_formatted_notz() }}.</p>

<p>
  Share this URL with your peers:<br>
  <a href="{{ poll.share_url() }}">{{ poll.share_url() }}</a>
</p>
<p>
  <strong>Note!</strong> You can only edit this poll if you have this URL or use the same browser session:<br>
  <a href="{{ poll.manage_url() }}">{{ poll.manage_url() }}</a>
</p>

<form class="poll-form" action="/manage/{{ poll.manage_code }}/update_info" method="post">
  {% include "poll_info_table.html.j2" %}
  <p></p>
  <input type="submit" value="Update">
</form>

<div>
  <h3>Options</h3>
</div>

<table class="manage-table">
  <thead>
    <tr>
      <th>Start time</th>
      <th>End time</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for choice in poll.choices %}
    <form action="/manage/{{ poll.manage_code }}/delete_choice/{{ choice.id }}" method="post">
      <tr>
        <td>
          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
                 name="start_datetime_{{ choice.id }}"
                 value="{% if poll.is_whole_day %}{{ choice.start_date_notz() }}{% else %}{{ choice.start_datetime_notz() }}{% endif %}"
                 disabled
                 {% if last_choice_id == choice.id %}id="last-start-datetime"{% endif %}>
        </td>
        <td>
          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
                 name="end_datetime_{{ choice.id }}"
                 value="{% if poll.is_whole_day %}{{ choice.end_date_notz() }}{% else %}{{ choice.end_datetime_notz() }}{% endif %}"
                 disabled
                 {% if last_choice_id == choice.id %}id="last-end-datetime"{% endif %}>
        </td>
        <td>
          <input class="red" type="submit" value="Delete">
        </td>
      </tr>
    </form>
    {% endfor %}
    <form action="/manage/{{ poll.manage_code }}/add_choice" method="post">
      <tr>
        <td>
          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="start_datetime" required>
        </td>
        <td>
          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="end_datetime" required>
        </td>
        <td>
          <input class="green" type="submit" value="Add">
        </td>
      </tr>
    </form>
  </tbody>
</table>

<div class="danger-zone">
  <h3>Danger zone</h3>
  <form action="/manage/{{ poll.manage_code }}/delete" method="post">
    <!-- Empty forms make Lynx use HTTP method GET incorrectly, so we add a useless field -->
    <input type="hidden" name="poll_id" value="{{ poll.id }}">
    <input class="red" type="submit" value="Delete poll">
  </form>
</div>

<script>
const isWholeDay = {% if poll.is_whole_day %}true{% else %}false{% endif %};
const hour = 1000 * 60 * 60;
const day = hour * 24;

const startDatetimeInput = document.querySelector('input[name="start_datetime"]');
const endDatetimeInput = document.querySelector('input[name="end_datetime"]');

const lastStartDatetimeInput = document.getElementById('last-start-datetime');
const lastEndDatetimeInput = document.getElementById('last-end-datetime');

if (lastStartDatetimeInput !== null && startDatetimeInput.valueAsDate === null) {
  if (isWholeDay) {
    // set the start date to the last end date + 1 day if in whole day mode
    startDatetimeInput.valueAsDate = new Date(lastEndDatetimeInput.valueAsDate.getTime() + day);
    endDatetimeInput.valueAsDate = new Date(startDatetimeInput.valueAsDate.getTime());
  } else {
    // set the start date to the last end date + 1 hour if not in whole day mode
    startDatetimeInput.valueAsDate = new Date(lastEndDatetimeInput.valueAsDate.getTime());
    endDatetimeInput.valueAsDate = new Date(startDatetimeInput.valueAsDate.getTime() + hour);
  }
}

startDatetimeInput.addEventListener('change', onStartDatetimeChange);

function onStartDatetimeChange(event) {
  const endDatetimeInput = document.querySelector('input[name="end_datetime"]');
  if (endDatetimeInput.valueAsDate === null) {
    if (isWholeDay) {
      // set the end date to the start date if in whole day mode
      endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime());
    } else {
      // set the end date to the start date + 1 hour if not in whole day mode
      endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime() + hour);
    }
  }
}

const query = new URLSearchParams(window.location.search);
const focusNext = query.get('focus_next');
if (focusNext !== null) {
  const nextInput = document.querySelector(`input[name="start_datetime"]`);
  if (nextInput !== null) {
    nextInput.focus();
  }
}
</script>

{% endblock %}