<div class="mx-0 px-0" style="width: 100%; height:500px; overflow-y:auto;">
  <ul class="nav nav-tabs md-tabs tabs-left b-none" role="tablist" style="width: 5%; min-width: 50px">
    <li class="nav-item" title="CONSEIL INTERIEUR ET DE DISCIPLINE" style="width: 50px">
      <a class="nav-link pl-0 {{ session('sub') ? getSession('sub', 'conseils'):'active'}}" data-toggle="tab" href="#chapter3_1" role="tab">1</a>
      <div class="slide"></div>
    </li>
    <li class="nav-item" title="CAS SOCIAUX" style="width: 50px">
      <a class="nav-link pl-0 {{ getSession('sub', 'cas sociaux') }}" data-toggle="tab" href="#chapter3_2" role="tab">2</a>
      <div class="slide"></div>
    </li>
    <li class="nav-item" title="ACTIVITES LIEES A LA VIE SCOLAIRE" style="width: 50px">
      <a class="nav-link pl-0 {{ getSession('sub', 'vie scolaire') }}" data-toggle="tab" href="#chapter3_3" role="tab">3</a>
      <div class="slide"></div>
    </li>

    <li class="nav-item" title="ACTIVITES PARASCOLAIRES" style="width: 50px">
      <a class="nav-link pl-0 {{ getSession('sub', 'parascolaire') }}" data-toggle="tab" href="#chapter3_4" role="tab">4</a>
      <div class="slide"></div>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content tabs-left-content card-body p-0 m-0" style="width: 95%; min-width: 1100px">
      <div class="tab-pane {{ session('sub') ? getSession('sub', 'conseils'):'active'}}" id="chapter3_1" role="tabpanel">
        <p class="m-0" style="width: 100%">
          <div class="card-header my-0 pb-0">
            <div class="d-flex justify-content-between">
              <h5>CONSEIL INTERIEUR ET DE DISCIPLINE</h5>
              <span id="A">
                <i class="fas fa-share-alt mx-0" style="font-size: 20px"></i>
              </span>
            </div>
            <hr class="mt-0 pt-0">
          </div>
          <div class="card-block">
            <section class="section_1 mb-2">
              @livewire('chapter3.interieur', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
            <section class="section_2 mb-2">
              @livewire('chapter3.discipline', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
          </div>
        </p>
      </div>
      <div class="tab-pane {{ getSession('sub', 'cas sociaux') }}" id="chapter3_2" role="tabpanel">
        <p class="m-0" style="width: 100%">
          <div class="card-header my-0 pb-0">
            <div class="d-flex justify-content-between">
              <h5>CAS SOCIAUX</h5>
              <span id="A">
                <i class="fa fa-bullseye mx-0" style="font-size: 20px"></i>
              </span>
            </div>
            <hr class="mt-0 pt-0">
          </div>
          <div class="card-block">
            <section class="section_1 mb-2">
              @livewire('chapter3.abandon', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
            <section class="section_2 mb-2">
              @livewire('chapter3.grossesse', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
            <section class="section_2 mb-2">
              @livewire('chapter3.maladie', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
            <section class="section_2 mb-2">
              @livewire('chapter3.deces', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
          </div>
        </p>
      </div>
      <div class="tab-pane {{ getSession('sub', 'vie scolaire') }}" id="chapter3_3" role="tabpanel">
        <p class="m-0" style="width: 100%">
          <div class="card-header my-0 pb-0">
            <div class="d-flex justify-content-between">
              <h5>ACTIVITES LIEES A LA VIE SCOLAIRE</h5>
              <span id="A">
                <i class="fa fa-puzzle-piece mx-0" style="font-size: 20px"></i>
              </span>
            </div>
            <hr class="mt-0 pt-0">
          </div>
          <div class="card-block">
            <section class="section_1 mb-2">
              @livewire('chapter3.scolaire', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
          </div>
        </p>
      </div>
      <div class="tab-pane {{ getSession('sub', 'parascolaire') }}" id="chapter3_4" role="tabpanel">
        <p class="m-0" style="width: 100%">
          <div class="card-header my-0 pb-0">
            <div class="d-flex justify-content-between">
              <h5>ACTIVITES PARASCOLAIRES</h5>
              <span id="A">
                <i class="fa fa-cubes  mx-0" style="font-size: 20px"></i>
              </span>
            </div>
            <hr class="mt-0 pt-0">
          </div>
          <div class="card-block">
            <section class="section_1 mb-2">
              @livewire('chapter3.association', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>

            <section class="section_2 mb-2">
              @livewire('chapter3.sportive', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>

            <section class="section_3 mb-2">
              @livewire('chapter3.cooperative', ['cutting' => $cutting->id, 'school' => auth()->user()->school_id])
            </section>
          </div>
        </p>
      </div>
  </div>
</div>