{{-- resources/views/frontend/secretaries/index.blade.php --}}
@extends('layouts.apps')
@section('title', 'Secretaries - Africa Inland Church Tanzania(AICT)')
@section('title','Secretaries')

@section('content')
<div class="container" style="padding: 50px 0;">
  <h1 class="text-center" style="margin-bottom: 40px;">Secretaries</h1>

  <div class="row">
    @forelse($secretaries as $sec)
      <div class="col-sm-6 col-md-3 text-center" style="margin-bottom: 30px;">
        <div class="thumbnail">
          <div style="width:100%; height:200px; overflow:hidden;">
            <img
              src="{{ \Illuminate\Support\Facades\Storage::url($sec->photo) }}"
              alt="{{ $sec->full_name }}"
              class="img-responsive"
              style="width:100%; height:100%; object-fit:cover;"
            >
          </div>
          <div class="caption">
            <strong style="display:block; margin-top:10px;">{{ $sec->full_name }}</strong>
            <small style="display:block; color:#777;">{{ $sec->position->name ?? '—' }}</small>
            <a href="{{ route('frontend.secretaries.show',$sec->id) }}"
               class="btn btn-xs btn-default" style="margin-top:10px;">
              Read more
            </a>
          </div>
        </div>
      </div>
    @empty
      <p class="text-muted">No secretaries found.</p>
    @endforelse
  </div>
</div>
@endsection