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

{% block head_meta %}
<title>Manage &quot;{{ poll.title }}&quot; - diddle 👉👈</title>
<meta name="description" content="{{ poll.description }}">
<meta property="og:title" content="Manage &quot;{{ poll.title }}&quot;">
<meta property="og:description" content="Manage diddle 👉👈 poll">
<meta property="og:url" content="{{ poll.manage_url() }}">
<meta property="og:site_name" content="diddle">
<meta property="og:type" content="website">
{% endblock %}

{% block content %}

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

<div>
  Share this URL with your peers:<br>
  <a id="share-link" href="{{ poll.share_url() }}">{{ poll.share_url() }}</a> <div id="share-link-copy"></div>
</div>
<p></p>
<div>
  <strong>Note!</strong> You can only edit this diddle if you have this URL or use the same browser session:<br>
  <a id="manage-link" href="{{ poll.manage_url() }}">{{ poll.manage_url() }}</a>
</div>
<p></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>{% if poll.is_whole_day %}Start date{% else %}Start time{% endif %}</th>
      <th>{% if poll.is_whole_day %}End date{% else %}End time{% endif %}</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 %}"
                 aria-label="{% if poll.is_whole_day %}Start date{% else %}Start datetime{% 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 %}"
                 aria-label="{% if poll.is_whole_day %}End date{% else %}End datetime{% 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 %}"
                 aria-label="{% if poll.is_whole_day %}Start date{% else %}Start datetime{% endif %}"
                 name="start_datetime"
                 required>
        </td>
        <td>
          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
                 aria-label="{% if poll.is_whole_day %}End date{% else %}End datetime{% endif %}"
                 name="end_datetime"
                 required>
        </td>
        <td>
          <input class="blue" 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.scrollIntoView();
    nextInput.focus();
  }
}

let shareLinkCopy = document.getElementById("share-link-copy");
if (shareLinkCopy !== null) {
  shareLinkCopy.outerHTML = "<button id='share-link-copy' aria-label='Copy share link' onclick='copyShareLink()'>📋</button>";
  shareLinkCopy = document.getElementById("share-link-copy"); // refresh the reference
}

function copyShareLink() {
  const shareLink = document.getElementById("share-link");
  const linkText = shareLink.getAttribute("href");
  navigator.clipboard.writeText(linkText);
  console.log("Copied to clipboard: " + linkText);
  shareLinkCopy.innerHTML = "✅";
  setTimeout(() => {
    shareLinkCopy.innerHTML = "📋";
  }, 2000);
}
</script>

{% endblock %}