@extends('layouts.app')
@section('title', $course->name . ' — コース設定')
@section('page-title', $course->name . ' — コース設定')
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
グループ管理 → レッスン設定 → 受講生・受講状況・コメント・コースの編集など、このコースに必要な作業をカードから選んで進められます。
@endsection

@push('styles')
@include('partials._setup_hub_tile_styles')
@endpush

@section('content')
<div class="setup-back-bar" role="navigation" aria-label="コース一覧への戻り">
  <a href="{{ route('site.show', $site) }}" class="setup-back-link">
    <i class="bi bi-arrow-left-circle-fill" aria-hidden="true"></i>
    コース一覧に戻る
  </a>
  <p class="setup-back-hint mb-0">カード一覧の画面です。先にグループ管理、次にレッスン設定の順で進めるのがおすすめです。</p>
</div>

@if(session('success'))
<div class="alert alert-success small py-2">{{ session('success') }}</div>
@endif

<div class="setup-card-grid">
  @foreach($hubCards as $card)
  <article class="setup-tile">
    <div class="setup-tile-icon setup-tile-icon--{{ $card['icon'] }}" aria-hidden="true"><i class="bi {{ $card['icon_bi'] }}"></i></div>
    <span class="setup-tile-badge setup-tile-badge--{{ $card['badge']['variant'] }}">{{ $card['badge']['label'] }}</span>
    <h2 class="setup-tile-title">{{ $card['title'] }}</h2>
    <p class="setup-tile-desc">{{ $card['description'] }}</p>
    <div class="setup-tile-actions">
      <a href="{{ $card['href'] }}" class="btn btn-outline-secondary w-100">{{ $card['button'] }}</a>
    </div>
  </article>
  @endforeach
</div>
@endsection