{% extends "base.html" %}
{% block title %}Calendar -- ProducerOS{% endblock %}
{% block page_heading %}Release Calendar{% endblock %}
{% block content %}
<div class="layout-10 flex justify-between items-center">
  <button class="btn filter-toggle" data-filter-toggle type="button">
    <svg class="icon" aria-hidden="true"><use href="/static/svg/icons.svg#icon-filter"/></svg> Filters
  </button>
  <a class="btn" href="/calendar/export.ics">Export .ics</a>
</div>

<div class="filter-drawer" data-filter-drawer>
  <div class="filter-drawer-panel panel">
    <div class="panel-title-row"><h2>Filters</h2><button class="btn btn-sm" data-filter-close type="button" aria-label="Close"><svg class="icon" aria-hidden="true"><use href="/static/svg/icons.svg#icon-close"/></svg></button></div>
    <form method="get" action="/calendar" class="grid grid-cols-4">
      <div class="field"><label for="project_id">Project</label>
        <select id="project_id" name="project_id"><option value="">All</option>{% for p in projects %}<option value="{{ p.id }}">{{ p.working_title }}</option>{% endfor %}</select>
      </div>
      <div class="field"><label for="artist_id">Artist</label>
        <select id="artist_id" name="artist_id"><option value="">All</option>{% for a in artists %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}</select>
      </div>
      <div class="field"><label for="campaign_id">Campaign</label>
        <select id="campaign_id" name="campaign_id"><option value="">All</option>{% for c in campaigns %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}</select>
      </div>
      <div class="field"><label for="deadline_type">Type</label>
        <select id="deadline_type" name="deadline_type"><option value="">All</option>{% for t in deadline_types %}<option value="{{ t.value }}">{{ t.value.replace("_"," ") }}</option>{% endfor %}</select>
      </div>
      <div class="layout-11 field"><button type="submit" class="btn btn-primary btn-block">Apply</button></div>
    </form>
  </div>
</div>

<div class="panel">
  <h2>Add a deadline</h2>
  <form method="post" action="/calendar/deadlines/new" class="layout-1 grid grid-cols-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="field"><label for="title">Title</label><input type="text" id="title" name="title" required></div>
    <div class="field"><label for="due_date">Due date</label><input type="date" id="due_date" name="due_date" required></div>
    <div class="field"><label for="deadline_type_2">Type</label>
      <select id="deadline_type_2" name="deadline_type">{% for t in deadline_types %}<option value="{{ t.value }}">{{ t.value.replace("_"," ") }}</option>{% endfor %}</select>
    </div>
    <div class="field"><label for="dproject">Project (optional)</label>
      <select id="dproject" name="project_id"><option value="">None</option>{% for p in projects %}<option value="{{ p.id }}">{{ p.working_title }}</option>{% endfor %}</select>
    </div>
    <div class="layout-12 field"><button type="submit" class="btn btn-primary">Add deadline</button></div>
  </form>
</div>

{% if overdue_items %}
<div class="layout-13 panel">
  <h2>Overdue</h2>
  {% for d in overdue_items %}
  <div class="record-card flex justify-between items-center">
    <span>{{ d.title }} <span class="text-faint">{{ d.due_date }}</span></span>
    <form method="post" action="/calendar/deadlines/{{ d.id }}/complete">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" class="btn btn-sm">Mark done</button>
    </form>
  </div>
  {% endfor %}
</div>
{% endif %}

<div class="panel">
  <h2>Upcoming (next 90 days)</h2>
  {% for d in upcoming %}
  <div class="record-card flex justify-between items-center">
    <span>{{ d.title }} <span class="text-faint">{{ d.due_date }} &middot; {{ d.deadline_type.value.replace("_"," ") }}</span></span>
    <form method="post" action="/calendar/deadlines/{{ d.id }}/complete">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" class="btn btn-sm">Mark done</button>
    </form>
  </div>
  {% else %}<p class="empty-state">No upcoming deadlines.</p>{% endfor %}
</div>
{% endblock %}