@extends('layouts.frontend')
@section('content')
<div class="container">
<div id="accordion">
  @foreach($categories as $category)
    <div class="card">
      <div class="card-header" id="heading{{$category->id}}">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$category->id}}" aria-expanded="true" aria-controls="collapse{{$category->id}}">
            {{$category->english_name}}
          </button>
        </h5>
      </div>

      <div id="collapse{{$category->id}}" class="collapse show" aria-labelledby="heading{{$category->id}}" data-parent="#accordion">
        <div class="card-body">
          <div class="row">
            @foreach($category->words as $word)
              <div class="col-md-4 mb-3">
                <div class="card">
                  <div class="card-body">
                    <div class="row align-items-center">
                      <div class="col-md-8">
                          <h5 class="card-title flex-grow-1">{{ $word->language }}</h5>
                      </div>
                      <div class="col-md-4 text-right">
                          <p class="card-text d-inline">{{ $word->english }}</p>
                      </div>
                    </div>
                    <div class="position-relative">
                      <span class="file-size-badge">
                        <small class="font-italic"><span class="badge badge-info">{{ $word->image_size }} KB</span></small>
                      </span>
                      <img src="{{ config('app.s3_image_base_url') . $word->image }}" alt="{{ $word->english }}" class="card-image card-img-top">
                    </div>

                    <div class="position-relative">
                      <span class="file-size-badge">
                        <small class="font-italic"><span class="badge badge-info">{{ $word->sound_size }} KB</span></small>
                      </span>
                      <audio controls>
                        <source src="{{ config('app.s3_audio_base_url') . $word->sound }}" type="audio/mpeg">
                        Your browser does not support the audio element.
                      </audio>
                    </div>
                    
                    <p class="card-text">
                    @if($word->locked)
                      <i class="text-danger fas fa-fw fa-lock"></i> Locked
                    @else
                      <i class="text-success fas fa-fw fa-lock-open"></i> Unlocked
                    @endif
                    </p>
                    
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  @endforeach
</div>
</div>
@endsection