@extends('app')

@section('foot')
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/swappable.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/uk.js"></script>
    <script src="{{ asset('js/blank.js') }}"></script>
@endsection

@section('head')
    @if ($is_admin)
        @include('partials.admin_styles')
    @endif
@endsection

@section('content')
    @if ($is_admin)
        @include('partials.admin_menu')
    @endif
    
    <header>
      <div class="container">
        <div class="profile">
          <div class="profile-image">
            <div class="img-placeholder">
              <img src="{{ asset('uploads') }}/{{ isset($settings['profile_image']) ? $settings['profile_image'] : '' }}" alt="{{ isset($settings['profile_name']) ? $settings['profile_name'] : '' }}">
            </div>
          </div>

          <div class="profile-user-settings">
            <h1 class="profile-user-name">{{ isset($settings['profile_name']) ? $settings['profile_name'] : 'janedoe_' }}</h1>

            @if ($is_admin)
            <button class="btn profile-edit-btn" id="editProfileBtn">{{ __('admin.buttons.edit_profile') }}</button>
            @endif
          </div>

          <div class="profile-bio">
            <p>{!! isset($settings['profile_description']) ? nl2br(e($settings['profile_description'])) : '' !!}</p>
            @if (isset($settings['profile_link']))
            <p>
              <a
                href="{{ $settings['profile_link'] }}" target="_blank"
                >{{ $settings['profile_link_text'] ?: '' }}</a
              >
            </p>
            @endif
          </div>
        </div>
        <!-- End of profile section -->
      </div>
      <!-- End of container -->
    </header>

    <main>
      <div class="container">
        <div id="app" class="gallery">
        @if ($posts)
            @foreach ($posts as $post)
            <div class="gallery-item-container status-{{ $post->statusClass() }}">
                <div class="gallery-item {{ $post->reference ? 'gallery-item--demo' : ''}}" 
                data-post='@json($post)'
                data-id="{{ $post->id }}" draggable=true tabindex="0" data-isgallery="{{ $post->TYPE_GALLERY == $post->type}}">

                       @if (!empty($post->uploads()->first()))
                          
                          @foreach ($post->uploads as $key => $upload)
                              @if (!$key)
                                @if ($upload->type == 2 && !empty($upload->child))
                                  <img src="{{ $upload->child->link }}" class="gallery-image" alt="" />
                                @else
                                  <img src="{{ $upload->link }}" class="gallery-image" alt="" />
                                @endif
                              @endif
                            @endforeach
                        @endif

                    @if ($post::TYPE_GALLERY == $post->type)
                    <div class="gallery-item-type">
                      <span class="visually-hidden">Gallery</span
                      ><i class="fas fa-clone" aria-hidden="true"></i>
                    </div>
                    @endif

                    @if ($post::TYPE_VIDEO == $post->type)
                    <div class="gallery-item-type">
                      <span class="visually-hidden">Video</span
                      ><i class="fas fa-video" aria-hidden="true"></i>
                    </div>
                    @endif

                    <div class="gallery-item-info">
                        <ul>
                        <li class="gallery-item-likes">
                          <span class="visually-hidden">Likes:</span
                          ><i class="fas fa-circle {{ $post->statusClass() }}" aria-hidden="true"></i>
                        </li>
                        <li class="gallery-item-comments">
                          <i class="fas fa-search" aria-hidden="true"></i>
                        </li>
                        </ul>
                    </div>
                </div>
            </div>
            @endforeach
        @endif
        
      </div>
    </main>

    <div id="popup" class="popup">
      <div class="popup--container">
        <div class="popup--wrapper">
          <div class="popup--image-slider swiper-container">
            <div class="swiper-wrapper popup--swiper">
              
            </div>

            <div class="swiper-button-navigation swiper-button-prev_v2">
              <i class="fas fa-chevron-circle-left"></i>
            </div>
            <div class="swiper-button-navigation swiper-button-next_v2">
              <i class="fas fa-chevron-circle-right"></i>
            </div>
          </div>
          <div class="popup--text-content">
            <div class="popup--text__content">
               @if ($is_admin)
               <button class="btn profile-edit-btn edit-post-btn">{{ __('admin.buttons.edit') }}</button>
               <button class="btn profile-edit-btn delete-post-btn">{{ __('admin.buttons.delete') }}</button>
               @endif

              <p class="popup--title">{{ __('admin.labels.theme') }}</p>
              <p class="popup--theme"></p>
              <p class="popup--title">{{ __('admin.labels.date') }}</p>
              <p class="popup--date"></p>
              <p class="popup--title">{{ __('admin.labels.tags') }}</p>
              <p class="popup--tags"></p>
              <p class="popup--title">{{ __('admin.labels.sign') }}</p>
              <!-- .promotion-1-3, .promotion-0-3, .promotion-2-3, .promotion-3-3 -->
              <p class="popup--promotion"><span>$</span><span>$</span><span>$</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="popup--close">CLOSE</div>
    </div>
    <!-- footer -->

    @if ($is_admin)
        @include('partials.admin_popup')
    @endif
@endsection