@extends('layouts.master')

@section('content')
<div>
    @include('flash::message')

    @if(isset($artists) && $artists->count() > 0)
        <h3 style="font-weight: 800; margin-bottom: 5px;">
            فنانون يبدأون بالحرف: <span style="color: #f7941d; font-size: 1.3em;">{{ $activeLetter }}</span>
            <small style="color: #fff; font-size: 0.65em; margin-right: 8px; background: #7777CC; padding: 4px 12px; border-radius: 4px; font-weight: 600;">({{ $artists->count() }} فنان)</small>
        </h3>
        <hr>
        <div class="artists-columns">
            @foreach($artists as $artist)
            <div class="artist-item">
                <a href="/artist/{{ $artist->slug }}">{{ $artist->name }}</a>
            </div>
            @endforeach
        </div>
    @elseif(isset($activeLetter))
        <h3 style="font-weight: 800; margin-bottom: 5px;">
            فنانون يبدأون بالحرف: <span style="color: #f7941d; font-size: 1.3em;">{{ $activeLetter }}</span>
        </h3>
        <hr>
        <p style="color: #999; text-align: center; padding: 30px 0;">
            لا يوجد فنانون يبدأون بهذا الحرف بعد.
        </p>
    @else
        <h3 style="font-weight: 800; margin-bottom: 5px;">تصفح الفنانين</h3>
        <p style="color: #666;">اختر حرفاً من الأعلى لعرض قائمة الفنانين</p>
        <hr>
        <p style="color: #999; text-align: center; padding: 30px 0;">
            اختر حرفاً من شريط الحروف الأبجدية أعلاه للبدء.
        </p>
    @endif
</div>
@endsection
