@extends('layouts.app')
@section('title', $song['title'])

@section('content')

    <link type='text/css' rel='stylesheet' href='/css/song.css'/>
    <div class='controlArea'>
    @if( isset( $back ) )
        <a class='back' href='{{route('song.show', ['song' => $back, 'playlist' => $playlist ?? ''])}}'>
        {{$back->name}}
        </a>
    @endif
    @if( $playlist ?? FALSE)
        <a class='home' href='{{route('playlist.show',['playlist' => $playlist->name])}}'>
            Back to {{$playlist->name}}
        </a>
    @else
        <a class='home' href='{{route('song.list')}}'>
        Go home
        </a>
    @endif
    @if( isset( $next ) )
        <a class='next' href='{{route('song.show', ['song' => $next, 'playlist' => $playlist ?? ''])}}'>
        {{$next->name}}
        </a>
    @endif
    </div>

    <h2>{{$song['title']}}</h2>
    <h3>{{$song->author}}</h3>
    @if($song->key)
        Key: {{$song->key}}<br/>
    @endif
    @if($song->verse)
        Scripture: {{$song->verse}}<br/>
    @endif
    @can('update', $song )
        <a href='{{ route( 'song.edit', $song ) }}'>edit this song</a>
    @endcan

    <form>
    <select name="transp" id="transp"
        value = "<?php echo $transp;?>"
    >
        <?php
            for ($i=-6; $i < 12; $i++) {
                if (($transp + 24)%12 == $i) $selected = 'selected';
                else $selected = '';
                $dir = "transpose";
                echo "<option value='$i' $selected>$dir $i semitones</option>";
            }
        ?>
    </select>
    <noscript>
        <button>Transpose</button>
    </noscript>
    </form>
    
    <pre>{!! $song['escapedText'] !!}</pre>
    <div id="chordarea">
        <canvas id='guitarregion' width="100" height="100" onclick="cycle(guitarObj);"></canvas>
        <canvas id='ukuleleregion' width="100" height="100" onclick="cycle(ukeObj);"></canvas>
    </div>

<script src='/js/chordsdata/chords.js'></script>
<script src='/js/chordsdata/ukulelechords.js'></script>
<script src='/js/page.js'></script>
<!--<script src='/js/app.js'></script>-->
<script src='/js/jsonly.js'></script>
<script src='/js/ccharter/ccharter.js'></script>
<!--<script src="https://api.reftagger.com/v2/RefTagger.js"></script>
<script>
    var refTagger = {
        settings: {
            bibleVersion: "NET",
            socialSharing:[],
            noSearchClassNames:["tabs"],
        }
    };
    (function(d, t) {
        var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
        g.src = "//api.reftagger.com/v2/RefTagger.js";
        s.parentNode.insertBefore(g, s);
    }(document, "script"));
</script>-->

@endsection