{% extends "allianceauth/base-bs5.html" %}
{% block page_title %}Calendar{% endblock %}
{% block content %}
<style>
  .oh-cal { table-layout: fixed; }
  .oh-cal td { height: 7.5rem; vertical-align: top; padding: .25rem; font-size: .8rem; }
  .oh-cal .oh-other { opacity: .45; }
  .oh-cal .oh-today { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
  .oh-entry { display: block; border-left: 4px solid var(--oh-color, #888); padding-left: .3rem; margin-bottom: .2rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oh-timer { font-style: italic; }
</style>
<div class="d-flex justify-content-between align-items-center mb-2">
  <h2 class="mb-0">Calendar</h2>
  {% if perms.opshub.create_operation %}<a class="btn btn-primary" href="{% url 'opshub:op_create' %}">Create op</a>{% endif %}
</div>
{% include "opshub/_nav.html" with active="calendar" %}

<div class="d-flex justify-content-between align-items-center mb-2">
  <a class="btn btn-outline-secondary" href="?y={{ prev.y }}&m={{ prev.m }}">&laquo; Prev</a>
  <h4 class="mb-0">{{ month_label }} <small class="text-muted">(EVE time)</small></h4>
  <a class="btn btn-outline-secondary" href="?y={{ next.y }}&m={{ next.m }}">Next &raquo;</a>
</div>

<table class="table table-bordered oh-cal">
  <thead><tr>{% for d in weekdays %}<th class="text-center">{{ d }}</th>{% endfor %}</tr></thead>
  <tbody>
  {% for week in weeks %}
    <tr>
    {% for cell in week %}
      <td class="{% if not cell.in_month %}oh-other{% endif %} {% if cell.date == today %}oh-today{% endif %}">
        <div class="text-muted">{{ cell.date.day }}</div>
        {% for e in cell.entries %}
          <a class="oh-entry {% if e.kind == 'timer' %}oh-timer{% endif %}" href="{{ e.url }}"
             {% if e.color %}style="--oh-color: {{ e.color }}"{% endif %} title="{{ e.title }}">
            {{ e.when|date:"H:i" }}
            {% if e.important %}<span class="text-danger">&#9679;</span>{% endif %}
            {% if e.ticker %}<strong>{{ e.ticker }}</strong>{% endif %}
            {{ e.title }}
          </a>
        {% endfor %}
      </td>
    {% endfor %}
    </tr>
  {% endfor %}
  </tbody>
</table>
<p class="text-muted small">Ops are solid, <em>timers</em> are italic. Red dot = important op / final timer.</p>
{% endblock %}