@extends('_layouts.app-public')

@section('content')
  <div class="content-wrapper page-lyric">
    <div class="content-header">
      <div class="container">
        <div class="row mb-2">
          <div class="col-md-6">
            <button class="btn btn-outline-secondary" onclick="window.history.back()">
              <i class="fa fa-chevron-left"></i> Back
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h2>{{ $lyric->title }}</h2>
            <span class="badge badge-secondary text-sm float-right">{{ $lyric->root_note }}</span>
            <p class="text-muted">{{ $lyric->artist }}</p>
            <div class="mt-5" style="font-size: 18px;">{!! $lyric->content() !!}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('title')
  [{{ $lyric->office_name }}] {{ $lyric->title }}
@endsection