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

@section('content')

	@if( $playlist)
    <a href='{{ route('playlist.show', ['playlist' => $playlist->name ] ) }}'>
        Back to "<i>{{$playlist->name}}</i>" playlist
    </a>
    @endif
    <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 = ($i >= 0 ? "up" : "down" );
                $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