@extends('guest.layout')

@section('content')
<section class="page-title page-title-4 bg-secondary">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                @if(!empty($register->title))
                    <h3 class="uppercase mb0">{{ $register->title }}</h3>
                @else
                    <h3 class="uppercase mb0">Repértoire {{ $register->year }}</h3>
                @endif
            </div>
            <div class="col-md-6 text-right">
                <ol class="breadcrumb breadcrumb-2">
                    <li>
                        <a href="{{url('/')}}">Accueil</a>
                    </li>
                    @if(!empty($register->title))
                        <li class="active">{{ $register->title }}</li>
                    @else
                        <li class="active">Repértoire {{ $register->year }}</li>
                    @endif
                </ol>
            </div>
        </div>
    </div>
</section>
<section class="image-square left">
    @hasanyrole('Admin|Publisher')
        <span class="editCorner">
            <a href="{{ url('/admin/registers/'.$register->id.'/edit') }}" class="btn btn-sm btn-filled-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Modifier</a>
        </span>
    @endhasanyrole
    <div class="col-md-6 image">
        <div class="background-image-holder">
            @if($register->hasMedia('registers_gallery'))
            {!! $register->getFirstMedia('registers_gallery')->img('', ['class'=>'background-image']) !!}
            @else
            <img src="{{ asset('images/actualite.jpg') }}" class="background-image" alt="">
            @endif
        </div>
    </div>
    <div class="col-md-6 col-md-offset-1 content">
        <ul class="list-group" class="mb-0">
            @foreach($register->registerDatas as $data)
            <li class="list-group-item">
                <span class="repTitle">"{{$data->title}}"</span>,
                <span> {{$data->description}}</span>
            </li>
            @endforeach
        </ul>
    </div>
</section>
@endsection

@section('head')
<style>
    .background-image-holder {
        background-repeat: no-repeat!important;
        background-size: contain!important;
    }
    @media all and (min-width: 991px) {
        .image-square {
            height: 90vw;
            max-height: 900px;
        }
    }
</style>
@endsection