%rebase('layout', title='Commitments', back_url=url_for('dashboard'))
<div class="page-header">
  <h1>Commitments</h1>
  <button type="button" class="btn btn-primary" commandfor="new-commitment-dialog" command="show-modal">+ Record a promise</button>
</div>

%_labels = {'open': 'Open', 'overdue': 'Overdue', 'mine': 'Mine', 'done': 'Done', 'all': 'Everything'}
<div class="filters">
  %for f in filters:
    <a class="filter-chip {{'active' if active == f else ''}}" href="{{url_for('commitments_list', _query={'filter': f})}}">{{_labels[f]}}</a>
  %end
</div>

<dialog id="new-commitment-dialog">
  <div class="dialog-head">
    <span class="dialog-title">Record a promise</span>
    <button type="button" class="dialog-close" commandfor="new-commitment-dialog" command="close" aria-label="Close">✕</button>
  </div>
  <form method="post" action="{{url_for('commitments_create')}}">
    <input type="hidden" name="_csrf_token" value="{{csrf_token()}}">
    <div class="dialog-body inline-form">
      <textarea name="description" placeholder="What did someone say they'd do?" required autofocus></textarea>
      <select name="person_id">
        <option value="">Nobody yet</option>
        %for p in people:
          <option value="{{p.id}}">{{p.name}}</option>
        %end
      </select>
      <input type="date" name="due_date" aria-label="Due date">
      <select name="customer_id">
        <option value="">No customer</option>
        %for c in clients:
          <option value="{{c.id}}">{{c.name}}</option>
        %end
      </select>
      <select name="project_id">
        <option value="">No project</option>
        %for p in projects:
          <option value="{{p.id}}">{{p.name}}</option>
        %end
      </select>
      <select name="source">
        <option value="manual">Noted by hand</option>
        <option value="meeting">From a meeting</option>
        <option value="email">From an email</option>
      </select>
    </div>
    <div class="dialog-foot">
      <button type="button" class="btn" commandfor="new-commitment-dialog" command="close">Cancel</button>
      <button class="btn btn-primary" type="submit">Record it</button>
    </div>
  </form>
</dialog>

<table class="data-table">
  <thead>
    <tr><th>Person</th><th>Commitment</th><th>Due</th><th>Status</th><th></th></tr>
  </thead>
  <tbody>
    %for c in commitments:
      %shown = insights.commitment_display_status(c)
      <tr id="record-{{c.id}}">
        <td class="nowrap">{{c.person.name if c.person_id else '—'}}</td>
        <td>
          {{c.description}}
          %if c.customer_id or c.project_id:
            <span class="muted">
              %if c.customer_id:
                · {{c.customer.name}}
              %end
              %if c.project_id:
                · {{c.project.name}}
              %end
            </span>
          %end
        </td>
        <td class="nowrap">{{insights.due_phrase(c.due_date).replace('due ', '').replace('was ', '')}}</td>
        <td><span class="badge badge-{{shown}}"><i class="dot"></i>{{status_label(shown)}}</span></td>
        <td>
          %# One button for the thing people actually do here: tick it off.
          <form method="post" action="{{url_for('commitment_status', commitment_id=c.id)}}" class="inline-form">
            <input type="hidden" name="_csrf_token" value="{{csrf_token()}}">
            <input type="hidden" name="back" value="{{active}}">
            %if c.status == 'done':
              <input type="hidden" name="status" value="open">
              <button class="btn-link" type="submit">Reopen</button>
            %else:
              <input type="hidden" name="status" value="done">
              <button class="btn-link" type="submit">Mark done</button>
            %end
          </form>
        </td>
      </tr>
    %end
    %if not commitments:
      <tr><td colspan="5" class="muted">
        %if active == 'overdue':
          Nothing overdue. Everyone is keeping their word.
        %elif active == 'mine':
          Nothing is on you right now.
        %else:
          No commitments recorded yet.
        %end
      </td></tr>
    %end
  </tbody>
</table>