@extends('layouts.app')
@section('title', "All songs")
@section('content')
<div class='container'>
                <h1>
                    Prosongsa Songs
                </h1>
                <a href="/random/">Random Song</a>
                <form>
                    <input id='toc-filter' placeholder='filter songs'>
                </form>
                Sort by:
                @foreach(['id','title','author'] as $key)
                <a href='/?sort={{$key}}'>
                    @if(($_GET['sort'] ??'title') ==$key)
                        <i>{{$key}}</i>
                    @else
                        <b>{{$key}}</b>
                    @endif
                </a>
                @endforeach
                <ul id='toc'>
                    @foreach( App\Song::orderBy($_GET['sort']??'title')->get() as $song )
                        <li>
                            <a href='{{ route('song.show', ['song' => $song]) }}'>
                                {{ $song->audio ? "🎵" : ""}}{{ $song->name }}
                            </a>
                    @endforeach
                </ul>
                <script src='js/toc-filter.js?nojq' defer></script>
</div>
@endsection