{% extends "base.html" %}

{% block title %}Sheets - {{ database }}{% endblock %}

{% block extra_head %}
<style>
  .sheets-workbook-list {
    max-width: 640px;
    margin: 2rem auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  .sheets-workbook-list h2 {
    font-size: 20px;
    color: #111A35;
    margin-bottom: 1rem;
  }
  .workbook-card {
    display: block;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 8px;
    text-decoration: none;
    color: #111A35;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .workbook-card:hover {
    border-color: #276890;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .workbook-card .name {
    font-size: 16px;
    font-weight: 600;
  }
  .workbook-card .meta {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }
  .create-form {
    display: flex;
    gap: 8px;
    margin-bottom: 1.5rem;
  }
  .create-form input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
  }
  .create-form input:focus {
    outline: none;
    border-color: #276890;
  }
  .create-form button {
    padding: 8px 16px;
    background: #276890;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
  }
  .create-form button:hover {
    background: #1d5570;
  }
  .empty-state {
    text-align: center;
    padding: 2rem;
    color: #666;
  }
</style>
{% endblock %}

{% block content %}
<div class="sheets-workbook-list">
  <h2>Workbooks</h2>

  <form class="create-form" id="create-workbook-form">
    <input type="text" name="name" placeholder="New workbook name..." value="Untitled Workbook" />
    <button type="submit">Create</button>
  </form>

  <div id="workbook-list">
    {% if workbooks %}
      {% for wb in workbooks %}
        <a class="workbook-card" href="/{{ database }}/-/sheets/workbook/{{ wb.id }}">
          <div class="name">{{ wb.name }}</div>
          <div class="meta">Updated {{ wb.updated_at }}</div>
        </a>
      {% endfor %}
    {% else %}
      <div class="empty-state">No workbooks yet. Create one above.</div>
    {% endif %}
  </div>
</div>

<script>
  document.getElementById('create-workbook-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = e.target.name.value.trim() || 'Untitled Workbook';
    const resp = await fetch('/{{ database }}/-/sheets/api/workbooks/create', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name }),
    });
    if (resp.ok) {
      const data = await resp.json();
      window.location.href = '/{{ database }}/-/sheets/workbook/' + data.workbook.id;
    }
  });
</script>
{% endblock %}