@extends('layouts.fe_master')

@php
    $title = "30PICTURES - " . $creator->name;
    $description = "30 Pictures's Creator";
    $ogTitle = $title;
    $ogDescription = $description;
    $ogImage = url($creator->image_url);
    $twitterTitle = $title;
    $twitterDescription = $description;
    $artistName = "30PICTURES";
    $schemaDescription = $description;
@endphp

@section('content')
    <div class="header-padding"></div>
    {{-- <div class="banner">
        <img src="{{ $page->banner_url }}" class="img" alt="home banner" />
<div class="play-btn">
    <img src="{{ asset('/assets') }}/media/images/svg/play-btn.svg" />
</div>
</div> --}}
    <!-- main -->
    <div class="main creator-container">
        <div class="creator-detail-section">
            <div class="section-title">
                <a href="{{ route('frontend.creator.index') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24" fill="none">
                        <path
                            d="M1.27727 7.36906C0.886745 7.75959 0.886745 8.39275 1.27727 8.78328L7.64123 15.1472C8.03175 15.5378 8.66492 15.5378 9.05544 15.1472C9.44597 14.7567 9.44597 14.1235 9.05544 13.733L3.39859 8.07617L9.05544 2.41932C9.44597 2.02879 9.44597 1.39563 9.05544 1.0051C8.66492 0.614579 8.03176 0.614579 7.64123 1.0051L1.27727 7.36906ZM17.9844 23.0762L17.9844 13.0762L15.9844 13.0762L15.9844 23.0762L17.9844 23.0762ZM11.9844 7.07617L1.98438 7.07617L1.98438 9.07617L11.9844 9.07617L11.9844 7.07617ZM17.9844 13.0762C17.9844 9.76246 15.2981 7.07617 11.9844 7.07617L11.9844 9.07617C14.1935 9.07617 15.9844 10.867 15.9844 13.0762L17.9844 13.0762Z"
                            fill="black" />
                    </svg>
                </a>
                <a href="{{ route('frontend.creator.index') }}">
                    <h3>
                        30 Pictures's Creator
                    </h3>
                </a>
            </div>

            <div class="creator-detail">
                <div class="creator-detail-left">
                    <div class="creator-detail-left-img-wrapper">
                        <img src="{{ $creator->image_url }}" alt="creator avatar" />
                    </div>
                </div>
                <div class="creator-detail-right">
                    <div >
                        <h1 class="creator-name">{{ $creator->name }}</h1>
                        <h1 class="creator-position">{{ $creator->position }}</h1>
                        <h1 class="creator-position-desc">{{ $creator->position_desc }}</h1>
                        <div class="creator-description">{!! $creator->description !!}</div>
                    </div>
                    @if ($creator->id == 1 || $creator->id == 4 || $creator->id == 5)
                        <div class="d-flex g-2">
                            <div class="btn booking-btn mobile-d-none">
                                <span>
                                    Creator Projects
                                </span>
                            </div>
                            <div class="btn booking-btn mobile-d-none">
                                <span>
                                    Booking Creator
                                </span>
                                {{-- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
                            fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M16.5197 0.84006C17.072 0.840073 17.5197 1.2878 17.5197 1.84008L17.5195 10.8401C17.5195 11.3924 17.0717 11.8401 16.5195 11.8401C15.9672 11.84 15.5195 11.3923 15.5195 10.84L15.5196 4.25425L2.18658 17.5867C1.79605 17.9772 1.16288 17.9772 0.772368 17.5866C0.381853 17.1961 0.381869 16.5629 0.772402 16.1724L14.1055 2.84L7.51968 2.83984C6.96739 2.83983 6.51969 2.3921 6.5197 1.83982C6.51971 1.28753 6.96744 0.83983 7.51972 0.839844L16.5197 0.84006Z"
                                fill="black" />
                        </svg> --}}
                            </div>
                        </div>
                    @endif

                </div>
            </div>
            @if ($creator->id == 1 || $creator->id == 4 || $creator->id == 5)
                <div class="btn booking-btn d-none mobile-d-flex">
                    <span>
                        Booking Creator
                    </span>
                    {{-- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M16.5197 0.84006C17.072 0.840073 17.5197 1.2878 17.5197 1.84008L17.5195 10.8401C17.5195 11.3924 17.0717 11.8401 16.5195 11.8401C15.9672 11.84 15.5195 11.3923 15.5195 10.84L15.5196 4.25425L2.18658 17.5867C1.79605 17.9772 1.16288 17.9772 0.772368 17.5866C0.381853 17.1961 0.381869 16.5629 0.772402 16.1724L14.1055 2.84L7.51968 2.83984C6.96739 2.83983 6.51969 2.3921 6.5197 1.83982C6.51971 1.28753 6.96744 0.83983 7.51972 0.839844L16.5197 0.84006Z"
                    fill="black" />
            </svg> --}}
                </div>
                <div class="btn booking-btn d-none mobile-d-flex">
                    <span>
                        Creator Projects
                    </span>
                    {{-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M8.69089 23.342C8.30036 23.7325 7.6672 23.7325 7.27668 23.342L0.912872 16.9779C0.522357 16.5873 0.522371 15.9542 0.912905 15.5636C1.30344 15.1731 1.93661 15.1731 2.32712 15.5637L6.98386 20.2206L6.98432 1.3653C6.98433 0.813018 7.43206 0.365313 7.98434 0.365326C8.53662 0.365339 8.98433 0.813064 8.98431 1.36535L8.98386 20.2207L13.6408 15.5639C14.0314 15.1734 14.6645 15.1734 15.055 15.564C15.4456 15.9545 15.4455 16.5877 15.055 16.9782L8.69089 23.342Z"
                    fill="black" />
            </svg> --}}
                </div>
            @endif
        </div>
    </div>

    <div class="pt32 mobile-d-none"></div>
    <!-- end main -->

@endsection