@extends('_layouts.app-public')

@section('content')
  <div class="content-wrapper page-quran">
    <div class="content-header">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-outline-secondary" onclick="window.history.back()">
              <i class="fa fa-chevron-left"></i> Back
            </button>
          </div>
          <div class="col-md-12">
            <h1 class="mt-3 text-center">Surah {{ $surah['latin'] }}</h1>
            <h2 class="mt-3 text-center">{{ $surah['arabic'] }}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="container">
        @foreach ($ayah as $item)
          <div class="card">
            <div class="card-body">
              <span class="badge badge-secondary text-sm mb-4">{{ $item['ayah'] }}</span>
              <h3 class="text-right text-normal">{{ $item['arabic'] }}</h3>
              <br>
              <p>{{ $item['latin'] }}</p>
              <p class="text-muted">{{ $item['translation'] }}</p>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
@endsection

@section('title')
  Quran - {{ $surah['latin'] }}
@endsection