@extends('layouts.app')

@section('titre', 'Organigramme')

@section('contenu')

<section class="hero">
  <div class="container">
    <p class="hero-eyebrow">Le club en coulisses</p>
    <h1>Le bureau du club</h1>
    <p class="lede">Élu par les licenciés, le bureau dirige la vie du club et s'appuie sur des bénévoles engagés au quotidien.</p>
  </div>
</section>

<section class="section">
  <div class="container">

    <div class="bureau-groupe">
      <div class="section-tete">
        <p class="section-eyebrow">Bureau exécutif</p>
        <h2>Direction du club</h2>
      </div>
      <div class="grille-bureau">
        @foreach ($executif as $membre)
          <article class="fiche-membre">
            <div class="avatar-membre">{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($membre->fonction, 0, 2)) }}</div>
            <h3>{{ $membre->nom }}</h3>
            <p class="fonction">{{ $membre->fonction }}</p>
          </article>
        @endforeach
      </div>
    </div>

    <div class="bureau-groupe">
      <div class="section-tete">
        <p class="section-eyebrow">Pôles d'activité</p>
        <h2>Responsables de pôle</h2>
      </div>
      <div class="grille-bureau">
        @foreach ($poles as $membre)
          <article class="fiche-membre">
            <div class="avatar-membre">{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($membre->fonction, 0, 2)) }}</div>
            <h3>{{ $membre->nom }}</h3>
            <p class="fonction">{{ $membre->fonction }}</p>
          </article>
        @endforeach
      </div>
    </div>

  </div>
</section>

@endsection