@extends('layouts.master')

@section('meta_description', $artwork->description ?? 'Artwork by ' . $artwork->artist->name . ', "' .  $artwork->title . '" for the podcast ' . $artwork->podcast->name . '.')

@section('meta_og_img', config('app.static_asset_url') .  '/thumbnails/' . $artwork->filename)

@section('page-title', '"' . $artwork->title . '" by ' . $artwork->artist->name)

@section('page-top')
<section class="inner-page-banner bg-2 bg-image">
    <div class="container">
        <div class="inner text-center">
            <h1 class="title">Artwork for {{ $artwork->podcast->name }}
                {{ number_format($artwork->episode->episode_number + 0) }}</h1>
            <nav class="mt-4">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="/artworks">Explore Artwork</a></li>
                    <li class="breadcrumb-item active">Artwork</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
@endsection
@section('page-content')
<section class="product-details section-bg-separation-2 pt-120 pb-90">
    <div class="container">
        @if (auth()->user() && $artwork->artist->id == auth()->user()->artists()->first()->id)
            @if ($artwork->approved_by == null)
                <div class="row">
                    <div class="col">
                        <div class="alert alert-warning">
                            <strong>Pending Approval</strong><br>
                            This artwork has been received by our server, but has not been approved and can only be viewed by you.
                            Another artist with approval authority will come along shortly and approve it, give them a few minutes.
                        </div>
                    </div>
                </div>
            @endif
        @endif
        <div class="row">
            <div class="col-xxl-6 mb-6">
                <div class="explore-style-one">
                    <div class="thumb"><a href="{{ config('app.static_asset_url') }}/artworks/{{ $artwork->filename }}"
                        ><img id="largeImage"src="{{ config('app.static_asset_url') }}/artworks/{{ $artwork->filename }}"
                            alt="{{ $artwork->title }} by {{ $artwork->artist->name }} for {{ $artwork->podcast->title }}"></a>
                    </div>
                </div>
            </div>
            <div class="col-xxl-6 mb-6 mb-6">
                <div class="details-content">
                    <h2 class="main_title">&ldquo;{{ $artwork->title }}&rdquo;</h2>
                    <h4 class="mb-1">By {{ $artwork->artist->name }}</h4>
                    <p class="subtitle">
                        {{ $artwork->episode->artwork_id == $artwork->id ? 'Selected' : 'Submitted' }} for {{ $artwork->podcast->name }}<br>
                        Episode {{ number_format($artwork->episode->episode_number + 0) }} &middot;
                        {{ $artwork->episode->episode_date->format('l, F j') }}<sup>{{ $artwork->episode->episode_date->format('S') }}</sup>,
                        {{ $artwork->episode->episode_date->format('Y') }}
                    </p>
                    @if ($artwork->description)
                        <h4 class="mb-1">Description</h4>
                        <p class="subtitle">{{ $artwork->description }}</p>
                    @endif
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <a class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"
                                    href="{{ config('app.static_asset_url') }}/artworks/{{ $artwork->filename }}">
                                    <span>Download 3k px Image</span></a>
                            </div>
                            <div class="col">
                                <a class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"
                                    href="{{ config('app.static_asset_url') }}/thumbnails/{{ $artwork->filename }}">
                                    <span>Download 512 px Image</span></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                @if ($artwork->episode->artwork)
                                <a href="/podcast/{{ $artwork->episode->podcast->slug }}/episode/{{ $artwork->episode->slug }}"
                                    class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"><span><i
                                        class="ri-headphone-fill"></i>
                                        View Episode
                                    </span></a>
                                </div>
                                <div class="col">
                                @endif
                                    <a href="/podcasts/{{ $artwork->podcast->slug }}"
                                        class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"><span><i
                                            class="ri-broadcast-line"></i>
                                            {{ $artwork->podcast->name }} Podcast
                                        </span></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <a href="/artist/{{ $artwork->artist->slug }}"
                                        class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"><span><i
                                            class="ri-user-fill"></i>
                                            View {{ $artwork->artist->name }}'s Artist Profile
                                    </span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection