{% extends "base.html" %}
{% block title %}顧客 — 保守デスク{% endblock %}
{% block content %}
<div class="head">
  <h1>顧客</h1>
  <div class="sub">保守契約先の一覧。月次報告書は各顧客のページから。</div>
</div>
<div class="grid">
  <section class="card">
    <h2>新しい顧客</h2>
    <form method="post" action="/customers">
      <label>顧客名（必須）</label>
      <input type="text" name="name" required>
      <label>対象システム</label>
      <input type="text" name="system_name">
      <label>窓口・連絡先</label>
      <input type="text" name="contact">
      <label>SLA目標（例: 一次応答2時間・復旧24時間）</label>
      <input type="text" name="sla_note">
      <label>契約範囲メモ</label>
      <textarea name="contract_note" style="height:56px"></textarea>
      <div class="form-foot"><button class="btn" type="submit">登録する</button></div>
    </form>
  </section>
  <section class="card">
    <h2>顧客一覧</h2>
    {% if customers %}
    <div class="tablewrap">
      <table>
        <thead><tr><th>#</th><th>顧客名</th><th>対象システム</th><th>SLA目標</th></tr></thead>
        <tbody>
          {% for c in customers %}
          <tr>
            <td class="mono">{{ c.id }}</td>
            <td class="title"><a href="/customers/{{ c.id }}">{{ c.name }}</a></td>
            <td>{{ c.system_name }}</td>
            <td>{{ c.sla_note }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="empty"><div class="emoji">🤝</div><p class="lead">まだ顧客がいません。</p><p>左のフォームから最初の1社を登録しましょう。</p></div>
    {% endif %}
  </section>
</div>
{% endblock %}