{% extends "base.html" %}

{% block title %}Operations{% endblock %}
{% block page_title %}Operations{% endblock %}

{% block head %}
<style>
  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  .toast-enter { animation: slideIn 0.2s ease-out; }
  .modal-backdrop { backdrop-filter: blur(4px); }
</style>
{% endblock %}

{% block header_actions %}
<input
  type="text"
  id="ops-search"
  placeholder="Search..."
  oninput="filterOps()"
  class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-xs text-slate-200 w-48 focus:outline-none focus:ring-1 focus:ring-violet-500 placeholder-slate-500"
>
<select
  id="ops-status"
  onchange="loadOpsData()"
  class="bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500"
>
  <option value="PENDING">Pending</option>
  <option value="all">All</option>
  <option value="completed">Completed</option>
  <option value="deleted">Deleted</option>
  <option value="history">History</option>
</select>
{% endblock %}

{% block content %}
<div class="grid grid-cols-2 gap-6">

  <!-- LEFT: User's Items (Reminders) -->
  <div>
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <div class="w-2 h-2 rounded-full bg-violet-400"></div>
        <h2 class="text-sm font-display font-semibold text-slate-100">User</h2>
        <span id="reminder-count" class="text-xs px-1.5 py-0.5 rounded-full bg-violet-500/20 text-violet-400 font-mono">0</span>
      </div>
      <button onclick="openCreate('reminder')" class="text-xs px-2 py-1 rounded-md bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
        + Add
      </button>
    </div>
    <div id="reminders-list" class="space-y-2">
      <div class="text-xs text-slate-600 font-mono py-4 text-center">Loading...</div>
    </div>
  </div>

  <!-- RIGHT: NEXO's Items (Followups) -->
  <div>
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <div class="w-2 h-2 rounded-full bg-pink-400"></div>
        <h2 class="text-sm font-display font-semibold text-slate-100">NEXO</h2>
        <span id="followup-count" class="text-xs px-1.5 py-0.5 rounded-full bg-pink-500/20 text-pink-400 font-mono">0</span>
      </div>
      <button onclick="openCreate('followup')" class="text-xs px-2 py-1 rounded-md bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
        + Add
      </button>
    </div>
    <div id="followups-list" class="space-y-2">
      <div class="text-xs text-slate-600 font-mono py-4 text-center">Loading...</div>
    </div>
  </div>

</div>

<!-- CREATE/EDIT MODAL -->
<div id="ops-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
  <div class="absolute inset-0 bg-black/60 modal-backdrop" onclick="closeModal()"></div>
  <div class="relative bg-slate-900 border border-slate-700/50 rounded-xl shadow-2xl w-full max-w-md mx-4">
    <div class="flex items-center justify-between px-5 py-4 border-b border-slate-800">
      <h2 id="modal-title" class="text-sm font-display font-semibold text-slate-100">New Item</h2>
      <button onclick="closeModal()" class="w-6 h-6 rounded-md flex items-center justify-center text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors text-lg leading-none">&times;</button>
    </div>
    <form id="modal-form" onsubmit="submitForm(event)" class="px-5 py-4 space-y-4">
      <div>
        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Description</label>
        <textarea
          name="description"
          rows="3"
          required
          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none placeholder-slate-500"
          placeholder="Describe the item..."
        ></textarea>
      </div>
      <div>
        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Date <span class="text-slate-600">(optional)</span></label>
        <input
          type="date"
          name="date"
          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500"
        >
      </div>
      <div id="category-group" class="hidden">
        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Category</label>
        <select name="category" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500">
          <option value="general">General</option>
          <option value="ideas">Ideas</option>
          <option value="my-project">My Project</option>
          <option value="project-a">Project A</option>
          <option value="server">Server</option>
        </select>
      </div>
      <div id="verification-group" class="hidden">
        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Verification</label>
        <textarea
          name="verification"
          rows="2"
          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none placeholder-slate-500"
          placeholder="How to verify this is done..."
        ></textarea>
      </div>
      <div id="reasoning-group" class="hidden">
        <label class="block text-xs text-slate-400 mb-1.5 font-medium">Reasoning</label>
        <textarea
          name="reasoning"
          rows="2"
          class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none placeholder-slate-500"
          placeholder="Why this followup exists..."
        ></textarea>
      </div>
      <input type="hidden" name="type" id="modal-type">
      <input type="hidden" name="edit_id" id="modal-edit-id">
      <input type="hidden" name="read_token" id="modal-read-token">
      <div class="flex items-center justify-end gap-2 pt-1">
        <button type="button" onclick="closeModal()" class="text-xs px-3 py-1.5 rounded-lg bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
          Cancel
        </button>
        <button type="submit" id="modal-submit-btn" class="text-xs px-3 py-1.5 rounded-lg bg-violet-600 text-white hover:bg-violet-500 transition-colors font-medium">
          Create
        </button>
      </div>
    </form>
  </div>
</div>

<!-- CONFIRM MODAL -->
<div id="confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
  <div class="absolute inset-0 bg-black/60 modal-backdrop" onclick="closeConfirm()"></div>
  <div class="relative bg-slate-900 border border-slate-700/50 rounded-xl shadow-2xl w-full max-w-sm mx-4">
    <div class="flex items-center justify-between px-5 py-4 border-b border-slate-800">
      <h2 class="text-sm font-display font-semibold text-slate-100">Confirm</h2>
      <button onclick="closeConfirm()" class="w-6 h-6 rounded-md flex items-center justify-center text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors text-lg leading-none">&times;</button>
    </div>
    <div class="px-5 py-4">
      <p id="confirm-message" class="text-xs text-slate-300 mb-4">Are you sure?</p>
      <div class="flex items-center justify-end gap-2">
        <button onclick="closeConfirm()" class="text-xs px-3 py-1.5 rounded-lg bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors">
          Cancel
        </button>
        <button id="confirm-btn" onclick="confirmAction()" class="text-xs px-3 py-1.5 rounded-lg bg-red-600 text-white hover:bg-red-500 transition-colors font-medium">
          Delete
        </button>
      </div>
    </div>
  </div>
</div>

<!-- OPS TOAST (separate from base toast) -->
<div id="ops-toast" class="hidden fixed bottom-6 right-6 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl border shadow-lg text-xs font-medium toast-enter max-w-xs">
  <span id="ops-toast-icon" class="flex-shrink-0"></span>
  <span id="ops-toast-message"></span>
</div>
{% endblock %}

{% block scripts %}
<script>
// -----------------------------------------------------------------------
// State
// -----------------------------------------------------------------------
let allReminders = [];
let allFollowups = [];
let pendingConfirmAction = null;

// -----------------------------------------------------------------------
// Ops Toast (uses its own element to avoid conflict with base toast)
// -----------------------------------------------------------------------
function opsToast(message, type = 'success') {
  const toast = document.getElementById('ops-toast');
  const msg = document.getElementById('ops-toast-message');
  const icon = document.getElementById('ops-toast-icon');
  msg.textContent = message;

  const styles = {
    success: { bg: 'bg-slate-800', border: 'border-emerald-500/30', text: 'text-emerald-400', iconSvg: '\u2713' },
    error:   { bg: 'bg-slate-800', border: 'border-red-500/30',     text: 'text-red-400',     iconSvg: '\u2715' },
    info:    { bg: 'bg-slate-800', border: 'border-violet-500/30',  text: 'text-violet-400',  iconSvg: '\u00b7' },
  };
  const s = styles[type] || styles.info;
  toast.className = `fixed bottom-6 right-6 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl border shadow-lg text-xs font-medium toast-enter max-w-xs ${s.bg} ${s.border}`;
  icon.className = s.text;
  icon.textContent = s.iconSvg;
  msg.className = 'text-slate-200';
  toast.classList.remove('hidden');
  clearTimeout(toast._timer);
  toast._timer = setTimeout(() => { toast.classList.add('hidden'); }, 3000);
}

// -----------------------------------------------------------------------
// Helpers
// -----------------------------------------------------------------------
function getToday() {
  return new Date().toISOString().split('T')[0];
}

function getWeekEnd() {
  const d = new Date();
  d.setDate(d.getDate() + 7);
  return d.toISOString().split('T')[0];
}

function opsRelativeDate(dateStr) {
  if (!dateStr) return '';
  const d = new Date(dateStr + 'T00:00:00'), now = new Date();
  now.setHours(0,0,0,0);
  const diff = Math.round((d - now) / 86400000);
  if (diff < -1) return Math.abs(diff) + 'd ago';
  if (diff === -1) return 'yesterday';
  if (diff === 0) return 'today';
  if (diff === 1) return 'tomorrow';
  if (diff <= 7) return diff + 'd';
  return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
}

async function fetchItemDetail(id, type) {
  const url = type === 'reminder' ? '/api/reminders/' + id : '/api/followups/' + id;
  const data = await fetchJSON(url);
  if (!data || !data.success) {
    throw new Error((data && (data.error || data.detail)) || 'Failed to read item history');
  }
  return type === 'reminder' ? data.reminder : data.followup;
}

async function fetchReadToken(id, type) {
  const item = await fetchItemDetail(id, type);
  const token = item.read_token;
  if (!token) {
    throw new Error('Missing read token for ' + id);
  }
  return { item, token };
}

// -----------------------------------------------------------------------
// Grouping
// -----------------------------------------------------------------------
function groupItems(items) {
  const today = getToday();
  const weekEnd = getWeekEnd();
  return {
    overdue:  items.filter(i => i.date && i.date < today && i.status !== 'COMPLETED'),
    today:    items.filter(i => i.date === today),
    week:     items.filter(i => i.date && i.date > today && i.date <= weekEnd),
    upcoming: items.filter(i => i.date && i.date > weekEnd),
    noDate:   items.filter(i => !i.date),
  };
}

// -----------------------------------------------------------------------
// Rendering
// -----------------------------------------------------------------------
function renderItem(item, type) {
  const today = getToday();
  const isOverdue  = item.date && item.date < today && item.status !== 'COMPLETED';
  const isToday    = item.date === today;
  const isCompleted = item.status === 'COMPLETED';

  const dotColor   = isCompleted ? 'bg-emerald-400' : isOverdue ? 'bg-red-400' : isToday ? 'bg-amber-400' : 'bg-slate-500';
  const dateLabel  = opsRelativeDate(item.date);
  const dateClass  = isOverdue ? 'text-red-400' : isToday ? 'text-amber-400' : 'text-slate-500';

  const desc = escapeHtml(item.description || '');
  const idLabel = escapeHtml(item.id || '');
  const category = type === 'reminder' && item.category ? escapeHtml(item.category) : '';

  const moveLabel  = type === 'reminder' ? '\u2192 NEXO' : '\u2190 User';
  const moveDir    = type === 'reminder' ? 'to_followup' : 'to_reminder';

  const runBtn = type === 'followup'
    ? `<button onclick="executeItem('${item.id}')" class="text-xs px-2.5 py-1 rounded bg-pink-500/10 text-pink-400 hover:bg-pink-500/20 transition-colors">\u25b6 Run</button>`
    : '';

  const completedOpacity = isCompleted ? 'opacity-50' : '';

  return `
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-lg p-4 group hover:border-slate-700 transition-colors ${completedOpacity}" data-id="${idLabel}">
      <div class="flex items-start gap-2">
        <div class="w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${dotColor}"></div>
        <div class="flex-1 min-w-0">
          <p class="text-sm text-slate-200 leading-relaxed line-clamp-2">${desc}</p>
          <div class="flex items-center gap-2 mt-1.5 flex-wrap">
            <span class="text-xs font-mono text-slate-600">${idLabel}</span>
            ${dateLabel ? `<span class="text-xs font-mono ${dateClass}">${dateLabel}</span>` : ''}
            ${category ? `<span class="text-xs px-1.5 py-0.5 rounded bg-slate-800 text-slate-500">${category}</span>` : ''}
            ${isCompleted ? `<span class="text-xs px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-500">done</span>` : ''}
          </div>
        </div>
      </div>
      <div class="flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
        ${!isCompleted ? `<button onclick="completeItem('${item.id}','${type}')" class="text-xs px-2.5 py-1 rounded bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 transition-colors">Done</button>` : ''}
        <button onclick="editItem('${item.id}','${type}')" class="text-xs px-2.5 py-1 rounded bg-slate-800 text-slate-400 hover:bg-slate-700 transition-colors">Edit</button>
        <button onclick="moveItem('${item.id}','${moveDir}')" class="text-xs px-2.5 py-1 rounded bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 transition-colors">${moveLabel}</button>
        ${runBtn}
        <button onclick="deleteItem('${item.id}','${type}')" class="text-xs px-2.5 py-1 rounded text-red-400/60 hover:bg-red-500/10 hover:text-red-400 transition-colors ml-auto">\u2715</button>
      </div>
    </div>
  `;
}

function renderGroupedItems(items, type, containerId) {
  const container = document.getElementById(containerId);
  const g = groupItems(items);

  const groups = [
    { key: 'overdue',  label: 'Overdue',     color: 'text-red-400' },
    { key: 'today',    label: 'Today',        color: 'text-amber-400' },
    { key: 'week',     label: 'This Week',    color: 'text-violet-400' },
    { key: 'upcoming', label: 'Upcoming',     color: 'text-slate-400' },
    { key: 'noDate',   label: 'No Date',      color: 'text-slate-600' },
  ];

  let html = '';
  let first = true;
  groups.forEach(({ key, label, color }) => {
    const list = g[key];
    if (!list || list.length === 0) return;
    const marginClass = first ? '' : 'mt-4';
    html += `<div class="text-xs uppercase tracking-wider ${color} font-medium mb-2 ${marginClass}">${label} <span class="opacity-50">(${list.length})</span></div>`;
    html += '<div class="space-y-2">' + list.map(i => renderItem(i, type)).join('') + '</div>';
    first = false;
  });

  if (!html) {
    html = '<div class="text-xs text-slate-600 font-mono py-8 text-center">No items</div>';
  }

  container.innerHTML = html;
}

// -----------------------------------------------------------------------
// Data loading
// -----------------------------------------------------------------------
async function loadOpsData() {
  const status = document.getElementById('ops-status').value;
  const statusParam = status ? '?status=' + encodeURIComponent(status) : '';

  const [remData, fupData] = await Promise.all([
    fetchJSON('/api/reminders' + statusParam),
    fetchJSON('/api/followups' + statusParam),
  ]);

  if (remData) {
    allReminders = remData.reminders || [];
    document.getElementById('reminder-count').textContent = allReminders.length;
  }
  if (fupData) {
    allFollowups = fupData.followups || [];
    document.getElementById('followup-count').textContent = allFollowups.length;
  }

  filterOps();
}

function filterOps() {
  const search = (document.getElementById('ops-search').value || '').toLowerCase();

  const filteredReminders = allReminders.filter(r =>
    !search ||
    (r.description || '').toLowerCase().includes(search) ||
    (r.id || '').toLowerCase().includes(search) ||
    (r.category || '').toLowerCase().includes(search)
  );
  const filteredFollowups = allFollowups.filter(f =>
    !search ||
    (f.description || '').toLowerCase().includes(search) ||
    (f.id || '').toLowerCase().includes(search)
  );

  renderGroupedItems(filteredReminders, 'reminder', 'reminders-list');
  renderGroupedItems(filteredFollowups, 'followup', 'followups-list');
}

// -----------------------------------------------------------------------
// Actions
// -----------------------------------------------------------------------
async function completeItem(id, type) {
  try {
    const { token } = await fetchReadToken(id, type);
    const url = type === 'reminder' ? '/api/reminders/' + id : '/api/followups/' + id;
    const res = await fetch(url, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: 'COMPLETED', read_token: token })
    });
    const data = await res.json();
    if (data.success) {
      opsToast('Completed ' + id);
      loadOpsData();
    } else {
      opsToast(data.error || data.detail || 'Complete failed (HTTP ' + res.status + ')', 'error');
    }
  } catch (err) {
    opsToast('Complete error: ' + err.message, 'error');
  }
}

async function moveItem(id, direction) {
  try {
    const type = direction === 'to_followup' ? 'reminder' : 'followup';
    const { token } = await fetchReadToken(id, type);
    const res = await fetch('/api/ops/move', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id, direction, read_token: token })
    });
    const data = await res.json();
    if (data.success) {
      opsToast('Moved ' + id + ' to ' + (direction === 'to_followup' ? 'NEXO' : 'User'));
      loadOpsData();
    } else {
      opsToast(data.error || data.detail || 'Move failed (HTTP ' + res.status + ')', 'error');
    }
  } catch (err) {
    opsToast('Move error: ' + err.message, 'error');
  }
}

async function executeItem(id) {
  try {
    const res = await fetch('/api/ops/execute/' + id, { method: 'POST' });
    const data = await res.json();
    if (data.success) {
      opsToast('Executing ' + id, 'info');
    } else {
      opsToast(data.error || data.detail || 'Execute failed (HTTP ' + res.status + ')', 'error');
    }
  } catch (err) {
    opsToast('Execute error: ' + err.message, 'error');
  }
}

function deleteItem(id, type) {
  pendingConfirmAction = async () => {
    try {
      const url = type === 'reminder' ? '/api/reminders/' + id : '/api/followups/' + id;
      const { token } = await fetchReadToken(id, type);
      const res = await fetch(url + '?read_token=' + encodeURIComponent(token), { method: 'DELETE' });
      const data = await res.json();
      if (data.success) {
        opsToast('Marked ' + id + ' as deleted');
        loadOpsData();
      } else {
        opsToast(data.error || data.detail || 'Delete failed (HTTP ' + res.status + ')', 'error');
      }
    } catch (err) {
      opsToast('Delete error: ' + err.message, 'error');
    }
  };
  document.getElementById('confirm-message').textContent = 'Delete ' + id + '? This marks it as DELETED and keeps its history.';
  document.getElementById('confirm-modal').classList.remove('hidden');
}

function closeConfirm() {
  document.getElementById('confirm-modal').classList.add('hidden');
  pendingConfirmAction = null;
}

function confirmAction() {
  if (pendingConfirmAction) pendingConfirmAction();
  closeConfirm();
}

// -----------------------------------------------------------------------
// Modal
// -----------------------------------------------------------------------
function openCreate(type) {
  const form = document.getElementById('modal-form');
  form.reset();
  document.getElementById('modal-type').value = type;
  document.getElementById('modal-edit-id').value = '';
  document.getElementById('modal-read-token').value = '';
  document.getElementById('modal-title').textContent = type === 'reminder' ? 'New Reminder' : 'New Followup';
  document.getElementById('modal-submit-btn').textContent = 'Create';
  document.getElementById('category-group').classList.toggle('hidden', type !== 'reminder');
  document.getElementById('verification-group').classList.toggle('hidden', type !== 'followup');
  document.getElementById('reasoning-group').classList.toggle('hidden', type !== 'followup');
  document.getElementById('ops-modal').classList.remove('hidden');
}

async function editItem(id, type) {
  let item;
  try {
    const detail = await fetchReadToken(id, type);
    item = detail.item;
    document.getElementById('modal-read-token').value = detail.token;
  } catch (err) {
    opsToast('Read history failed: ' + err.message, 'error');
    return;
  }
  const form = document.getElementById('modal-form');
  form.reset();
  document.getElementById('modal-type').value = type;
  document.getElementById('modal-edit-id').value = id;
  document.getElementById('modal-title').textContent = 'Edit ' + id;
  document.getElementById('modal-submit-btn').textContent = 'Save';
  document.getElementById('modal-read-token').value = item.read_token || '';
  document.getElementById('category-group').classList.toggle('hidden', type !== 'reminder');
  document.getElementById('verification-group').classList.toggle('hidden', type !== 'followup');
  document.getElementById('reasoning-group').classList.toggle('hidden', type !== 'followup');

  form.elements.description.value = item.description || '';
  form.elements.date.value = item.date || '';
  if (type === 'reminder' && item.category) {
    form.elements.category.value = item.category;
  }
  if (type === 'followup') {
    form.elements.verification.value = item.verification || '';
    form.elements.reasoning.value = item.reasoning || '';
  }

  document.getElementById('ops-modal').classList.remove('hidden');
}

function closeModal() {
  document.getElementById('ops-modal').classList.add('hidden');
  document.getElementById('modal-read-token').value = '';
}

async function submitForm(e) {
  e.preventDefault();
  const form = document.getElementById('modal-form');
  const fd = new FormData(form);
  const type = fd.get('type');
  const editId = fd.get('edit_id');
  const isEdit = !!editId;
  const readToken = fd.get('read_token');

  let url, method, body;

  if (type === 'reminder') {
    url = isEdit ? '/api/reminders/' + editId : '/api/reminders';
    method = isEdit ? 'PUT' : 'POST';
    body = {
      description: fd.get('description'),
      date: fd.get('date') || null,
      category: fd.get('category') || 'general'
    };
  } else {
    url = isEdit ? '/api/followups/' + editId : '/api/followups';
    method = isEdit ? 'PUT' : 'POST';
    body = {
      description: fd.get('description'),
      date: fd.get('date') || null,
      verification: fd.get('verification') || null,
      reasoning: fd.get('reasoning') || null
    };
  }
  if (isEdit) {
    body.read_token = readToken || '';
  }

  try {
    const res = await fetch(url, {
      method,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    });
    const data = await res.json();
    if (data.success) {
      opsToast(isEdit ? 'Updated ' + editId : 'Created successfully');
      closeModal();
      loadOpsData();
    } else {
      opsToast(data.error || data.detail || 'Save failed (HTTP ' + res.status + ')', 'error');
    }
  } catch (err) {
    opsToast('Save error: ' + err.message, 'error');
  }
}

// -----------------------------------------------------------------------
// Keyboard shortcuts
// -----------------------------------------------------------------------
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    closeModal();
    closeConfirm();
  }
  if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT') {
    if (e.key === 'r') openCreate('reminder');
    if (e.key === 'f') openCreate('followup');
  }
});

// -----------------------------------------------------------------------
// Init
// -----------------------------------------------------------------------
loadOpsData();
setInterval(loadOpsData, 60000);
</script>
{% endblock %}