@php
  $rows = $scenarioLabelRows ?? collect();
@endphp

<div class="card scenario-ws-card mb-3">
  <div class="card-body">
    <h2 class="h5 mb-2">ラベル設定</h2>
    <p class="text-muted small mb-3">
      このシナリオで使うラベル名をあらかじめ登録できます。<strong>LINE友だち</strong>のフィルタ候補・モーダルのクイック追加では、ここで登録した名前が<strong>先頭</strong>に出ます（読者に付いているラベルはその後に頻度順でマージ）。実際の付与は従来どおり読者の <code>labels</code> に保存されます。
    </p>

    @if(session('success'))
      <div class="alert alert-success py-2 small mb-3">{{ session('success') }}</div>
    @endif
    @if(session('error'))
      <div class="alert alert-danger py-2 small mb-3">{{ session('error') }}</div>
    @endif
    @if($errors->any())
      <div class="alert alert-danger py-2 small mb-3">
        <ul class="mb-0 ps-3">
          @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div class="d-flex flex-wrap gap-2 mb-3">
      <a href="{{ route('scenario.workspace.show', [$account, $scenario, 'line-friends']) }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-person-lines me-1"></i>LINE友だちへ
      </a>
    </div>

    <div class="border rounded-3 p-3 mb-4 bg-light-subtle">
      <div class="fw-semibold small mb-2">ラベルを追加</div>
      <form method="post" action="{{ route('scenario.workspace.labels.store', [$account, $scenario]) }}" class="row g-2 align-items-end">
        @csrf
        <div class="col-12 col-md-8">
          <label class="form-label small mb-1">ラベル名</label>
          <input type="text" name="name" class="form-control form-control-sm" value="{{ old('name') }}" maxlength="191" placeholder="例: 入会申し込み者" required>
        </div>
        <div class="col-12 col-md-4">
          <button type="submit" class="btn btn-success btn-sm w-100 w-md-auto"><i class="bi bi-plus-lg me-1"></i>追加</button>
        </div>
      </form>
    </div>

    <div class="border rounded-3">
      <div class="px-3 py-2 border-bottom fw-semibold small">登録一覧（表示順）</div>
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="min-width:12rem;">ラベル名</th>
              <th style="min-width:6rem;">読者数</th>
              <th style="width:7rem;">表示順</th>
              <th style="width:5rem;"></th>
            </tr>
          </thead>
          <tbody>
            @forelse($rows as $row)
              <tr>
                <td>
                  <form method="post" action="{{ route('scenario.workspace.labels.update', [$account, $scenario, $row['id']]) }}" class="d-flex flex-wrap gap-1 align-items-center">
                    @csrf
                    @method('PUT')
                    <input type="text" name="name" class="form-control form-control-sm flex-grow-1" style="min-width:10rem;" value="{{ $row['name'] }}" maxlength="191" required>
                    <button type="submit" class="btn btn-outline-secondary btn-sm text-nowrap">名前を保存</button>
                  </form>
                </td>
                <td>
                  <span class="text-muted small"><i class="bi bi-person me-1"></i>{{ (int) $row['subscriber_count'] }}</span>
                </td>
                <td>
                  <div class="d-flex gap-1">
                    <form method="post" action="{{ route('scenario.workspace.labels.move', [$account, $scenario, $row['id']]) }}" class="d-inline">
                      @csrf
                      <input type="hidden" name="dir" value="up">
                      <button type="submit" class="btn btn-light border btn-sm px-2" title="上へ">↑</button>
                    </form>
                    <form method="post" action="{{ route('scenario.workspace.labels.move', [$account, $scenario, $row['id']]) }}" class="d-inline">
                      @csrf
                      <input type="hidden" name="dir" value="down">
                      <button type="submit" class="btn btn-light border btn-sm px-2" title="下へ">↓</button>
                    </form>
                  </div>
                </td>
                <td class="text-end">
                  <form method="post" action="{{ route('scenario.workspace.labels.destroy', [$account, $scenario, $row['id']]) }}" class="d-inline" onsubmit="return confirm('この登録を削除しますか？（読者に付いたラベル文字列は自動では消えません）');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-outline-danger btn-sm">削除</button>
                  </form>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="4" class="text-center text-muted py-4">まだ登録がありません。上のフォームから追加してください。</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>