refonte des contact list

@extends('layouts.skeleton')

@section('content')
<div>
  @csrf

  {{-- Breadcrumb --}}
  <div class="ph3 ph5-ns cf w-100 bg-white pv3 mb3">
    <div class="mw9 center">
      <div class="fl w-100 pa2">
        <ul class="list pl0">
          <li class="di">
            <a href="{{ route('dashboard.index') }}">{{ trans('app.breadcrumb_dashboard') }}</a>
          </li>
          <li class="di">
            > {{ trans('app.breadcrumb_list_contacts') }}
          </li>
        </ul>
      </div>
    </div>
  </div>

  <section class="ph3 ph5-ns cf w-100 bg-gray-monica">
    <div class="mw9 center">
      <!-- left column -->
      <div class="fl w-80-ns w-100 pa2">

        <p class="">
          You have {{ $totalRecords }} contacts (and {{ $archived }} archived contacts).
        </p>

        <ul class="dt w-100 contact-list-page">
          @foreach ($contacts as $contact)
          <li class="dt-row w-100">
            <!-- checkbox -->
            <div class="dtc bt bg-white pl-2 pr-0 v-mid bl">
              <input type="checkbox" name="members[]" value="asbiin" aria-labelledby="member-asbiin" class="js-bulk-actions-toggle" data-check-all-item="">
            </div>

            <!-- photo -->
            <div class="dtc bt bg-white pv2 ph2 avatar relative v-mid">
              <img src="{{ $contact['avatar'] }}" width="40" height="40" class="dib">
            </div>

            <!-- name -->
            <div class="dtc bt bg-white pl-2 pr-0 pt-2 w-100 v-mid br">
              <div class="names relative">
                <a href="{{ $contact['route']}}" class="v-top">{{ $contact['name'] }}</a>

                <span class="db">
                  {{ $contact['description'] }}

                  @if(!is_null($contact['description']) && !is_null($contact['job']))
                  |
                  @endif

                  {{ $contact['job'] }}

                  @if(!is_null($contact['company']))
                  ({{ $contact['company'] }})
                  @endif
                </span>
              </div>
            </div>
          </li>
          @endforeach
        </ul>
      </div>

      <!-- right column -->
      <div class="fl w-20-ns w-100 pa2">
        <a href="{{ route('people.create') }}" class="btn btn-primary w-100 tc db mb3">
          {{ trans('people.people_list_blank_cta') }}
        </a>
        <ul class="pl0 list">
          <li>Without any tags ()</li>
          @foreach($tags as $tag)
          <li><a href="{{ route('people.index') }}/tags/{{ $tag->name_slug }}">{{ $tag->name }}</a> ({{ trans_choice('people.people_list_contacts_per_tags', $tag->contacts->count(), ['count' => $tag->contacts->count()]) }})</li>
          @endforeach

        </ul>
      </div>
    </div>
  </section>

</div>
@endsection