{% extends "base.html" %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <h5 class="mb-0">Companies / Engagements</h5>
</div>

<div class="row">
  <!-- Existing engagements -->
  <div class="col-lg-7 mb-4">
    <p class="text-muted small mb-2 fw-bold text-uppercase">Open an existing company</p>
    <table class="table table-dark table-hover table-sm align-middle">
      <thead>
        <tr>
          <th>Name</th>
          <th style="width:140px;">Key</th>
          <th style="width:120px;">Last Opened</th>
          <th style="width:90px;"></th>
        </tr>
      </thead>
      <tbody>
        {% for key, name, path, last_opened in engagements %}
        <tr>
          <td>{{ name }}</td>
          <td class="mono">{{ key }}</td>
          <td class="text-muted">{{ (last_opened or '')[:10] }}</td>
          <td>
            <form method="post" action="{{ url_for('open_engagement', key=key) }}">
              <button class="btn btn-sm btn-primary py-0 px-3 w-100">Open</button>
            </form>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="4" class="text-muted text-center py-3">No companies yet. Create one on the right.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Create new engagement -->
  <div class="col-lg-4 offset-lg-1">
    <div class="p-3 rounded bg-dark">
      <p class="text-muted small mb-3 fw-bold text-uppercase">Create a new company</p>
      <form method="post" action="{{ url_for('register_engagement') }}">
        <div class="mb-3">
          <label class="form-label">Company Name</label>
          <input type="text" name="eng_name" class="form-control form-control-sm" placeholder="e.g. Acme Corp 2025" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Key (short code)</label>
          <input type="text" name="eng_key" class="form-control form-control-sm" placeholder="e.g. acme_2025" required>
          <div class="form-text text-muted">Letters, numbers, underscores only.</div>
        </div>
        <button class="btn btn-sm btn-primary w-100">Create Company</button>
      </form>
    </div>
  </div>
</div>

{% endblock %}