{% extends "layout.html" %}
{% block content %}
<div class="page-narrow">
  <div class="panel">
    <div class="panel-title">Assign Weeks</div>
    <p>Assign a week number (1-3) for each date in {{ period }}. These settings compute weekly OT.</p>

    {% if request.session.get('is_admin') %}
      <form method="post" action="/assign-weeks">
        <input type="hidden" name="timesheet_id" value="{{ timesheet_id }}">

        <div class="form-row" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
          <label for="timesheet_name">Timesheet name</label>
          <input class="input" type="text" id="timesheet_name" name="timesheet_name" value="{{ timesheet_name }}" placeholder="e.g. Dec 1-15">
          <button type="submit" class="btn">Save Name</button>
        </div>

        <div class="table-wrap" style="max-width:720px;">
          <table class="table compact">
            <thead>
              <tr>
                <th style="text-align:center;">Date</th>
                <th style="text-align:center;">Week</th>
              </tr>
            </thead>
            <tbody>
              {% for d in days %}
              <tr>
                <td>{{ d.strftime("%A, %B %d, %Y") }}</td>
                <td>
                  <select class="select" name="week_{{ d.isoformat() }}">
                    {% for w in [1,2,3] %}
                      <option value="{{ w }}" {% if existing.get(d) == w %}selected{% endif %}>{{ w }}</option>
                    {% endfor %}
                  </select>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <div class="form-row" style="margin-top:12px; display:flex; gap:8px; flex-wrap:wrap;">
          <button type="submit" class="btn primary">OK</button>
          <!-- Back without deleting -->
          <button type="button" class="btn" onclick="window.location.href='/viewer?timesheet_id={{ timesheet_id }}'">Back to Viewer</button>
        </div>
      </form>

      <!-- Cancel import: delete this time period and return to Viewer -->
      <form method="post" action="/viewer/delete-period" onsubmit="return confirmCancel();" style="margin-top:8px;">
        <input type="hidden" name="timesheet_id" value="{{ timesheet_id }}">
        <button type="submit" class="btn danger">Cancel Import (Delete Period)</button>
      </form>
      <script>
        function confirmCancel() {
          return confirm('This will delete the entire time period and all imported entries. Continue?');
        }
      </script>
    {% else %}
      <div class="alert warn">
        You have view/print-only access. Assigning weeks is restricted to administrators.
      </div>
      <div class="form-row" style="display:flex;gap:8px;margin-top:8px;">
        <a class="btn" href="/viewer">Back to Timesheet Editor</a>
        <a class="btn" href="/review">Review Timesheets</a>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}