@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="artists-list">
                <h3 class="mb-3">My Artists</h3>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Artist Name</th>
                        <th scope="col">Price per Hour</th>
                        <th scope="col">Type</th>
                        <th scope="col">Genres</th>
                        <th scope="col">City, Country</th>
                        <th scope="col">Options</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($artists as $artist)
                        <tr>
                            <td>{{ $loop->index+1 }}</td>
                            <td>{{ $artist->user->name }}</td>
                            <td>{{ $artist->price_per_hour }}</td>
                            <td>{{ $artist->artist_type->name }}</td>
                            <td>@foreach($artist->genres as $genre) {{ $genre->name }} @if (!$loop->last)
                                    ,@endif @endforeach</td>
                            <td>{{ $artist->city }}, {{ $artist->country }}</td>
                            <td>
                                <a href="/{{ $artist->user->username }}">
                                    <button type="button" class="btn btn-primary">View Artist</button>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection