@php
  /** @var \App\Models\Page $page */

  // ali je dovoljeno določanje širine z miško (če je dovoljeno v Prefs::$web_properties['width'])
  $resize_horizontal = $page->restrictions->doesntContain('resize_horizontal') and $page->restrictions->doesntContain('resize');
  if($resize_horizontal) {
    $resize_horizontal = $page->property_shown('width', $parent, $grandparent);
  }

  // ali je dovoljeno določanje višine z miško (če je dovoljeno v Prefs::$web_properties['height'])
  $resize_vertical = $page->restrictions->doesntContain('resize_vertical') and $page->restrictions->doesntContain('resize');
  if($resize_vertical) {
    $resize_vertical = $page->property_shown('height', $parent, $grandparent);
  }

  if(in_array($page->element_type, App\Classes\Prefs::$web_page_children_types)) {
    $select_parent_label = null;
  } else {
    $select_parent_label = __null('edit.select_parent');
    if(__null('tables.pages.element_type.'.$parent?->element_type_key.'.label')) {
      $select_parent_label .= ': '.__null('tables.pages.element_type.'.$parent?->element_type_key.'.label');
    }
  }

@endphp


@if(\App\Classes\Prefs::$web_edit_mode)
  <div class="mnm-edit-buttons-holder">

    {{-- vrstica z gumbi samimim --}}
    <div class="mnm-edit-buttons">

      {{-- nastavitve elementa --}}
      <button class="mnm-edit-button"
              tabindex="-1"
              title="{{__null('edit.edit_element')}}"
              onclick="appInstance.$refs.editToolbar.showEditDialog(event, {{$page->id}}, '{{$section}}', undefined, undefined, undefined, {{$page->parent_id}});"
      ><span class="icon-settings"></span></button>


      {{-- označitev parenta (če obstaja) --}}
      @if($select_parent_label)
        <button class="mnm-edit-button"
                tabindex="-1"
                title="{{$select_parent_label}}"
                onclick="appInstance.$refs.editToolbar.selectParentElement(event, this.parentNode?.parentNode?.parentNode?.parentNode?.parentNode)"
        ><span class="icon-mouse-pointer"></span></button>
      @endif


      {{-- handle za premikanje elementa; absolutno pozicionirani elementi se ne smejo dati premikati --}}
      @if(     !preg_match('/position\s*:\s*absolute\s*;/i', $page->css ?? '')
           and !$page->combined_restrictions->contains('move')
           and $page->valid_siblings)
        <button class="mnm-edit-button mnm-edit-move-handle" tabindex="-1" title="{{__('edit.drag_to_move_element')}}" onclick="event?.stopPropagation();">
          <span class="icon-move"></span>
        </button>
      @endif


      {{-- gumb za urejanje besedila (ni potreben, ker tiny deluje na klik v besedilu, je pa dober za intuicijo pri urejanju --}}
      @if(!$page->combined_restrictions->contains('edit_text')
          and ($page->element_type_key == 'text'
               or ((\App\Classes\Prefs::$web_page_element_types[$page->element_type_key]['blade'] ?? null) == 'text') and $page->is_page != \App\Classes\Prefs::$web_page_is_page['content_copy']['id'])
          )
        <button class="mnm-edit-button mnm-edit-tiny" tabindex="-1" title="{{__('edit.edit_text')}}" onclick="appInstance.$refs.editToolbar.editElementText(event)">
          <span class="icon-edit-text"></span>
        </button>
      @endif


      {{-- ikona, če je element skrit (trajno ali samo v določenem obdobju ali pa zato, ker je njegov izvorni element skrit) --}}
      @if(in_array($page->status, [\App\Classes\Prefs::$web_page_statuses['shown_between']['id'], \App\Classes\Prefs::$web_page_statuses['hidden']['id']]))
        @php
          if($page->status == \App\Classes\Prefs::$web_page_statuses['shown_between']['id']) {
            $icon_class = 'clock';
            $time_range_info = \App\Classes\Utilities::timeRangeInfo($page->shown_from, $page->shown_to, true);
            if($time_range_info['position'] == 'present') {
              $background_class = 'mnm-background-green';
            } else if($time_range_info['position'] == 'past') {
              $background_class = 'mnm-background-red';
            } else if($time_range_info['position'] == 'invalid') {
              $icon_class = 'warning';
              $background_class = 'mnm-background-red';
            } else {
              $background_class = 'mnm-background-orange';
            }
            $title = __('edit.element_shown.'.$time_range_info['position'].'.title');
            $popup = 'edit.element_shown.'.$time_range_info['position'];
          } else if($page->status == \App\Classes\Prefs::$web_page_statuses['hidden']['id']) {
            $icon_class = 'hide';
            $background_class = 'mnm-background-red';
            $title = __('edit.element_shown.hidden.title');
            $popup = 'edit.element_shown.hidden';
          }
        @endphp
        <button class="mnm-edit-button {{$background_class ?? ''}}"
                tabindex="-1"
                title="{{$title}}"
                onclick="appInstance.$refs.editToolbar.showEditDialog(event, {{$page->id}}, '{{$section}}', 'element', 'status');"
        ><span class="icon-{{$icon_class}}"></span></button>
      @endif

      {{-- ikona, če bi element moral kazati na URL, pa URL-ja ni (ker nek parent element nima tega nastavljenega) --}}
      @if($uri['is_hidden'] === 'no_uri' or $uri['is_hidden'] === 'points_to_hidden')
        <button class="mnm-edit-button mnm-background-orange"
                tabindex="-1"
                title="{{__('edit.element_shown.'.$uri['is_hidden'].'.title')}}"
                onclick="appInstance.$refs.editToolbar.showEditDialog(event, {{$page->id}}, '{{$section}}', 'element', 'is_page');"
        >
          @if($uri['is_hidden'] === 'no_uri')
            <span class="mnm-element-icon material-symbols-rounded mnm-font-l">link_off</span>
          @else
            <span class="icon-hide"></span>
          @endif
        </button>
      @endif

      {{-- ikona, če je element skrit na določenih napravah --}}
      @if($page->hide_on > 0)
        @php
          $hidden_on_key = \App\Classes\Utilities::multiFindKey(\App\Classes\Prefs::$web_page_hide_ons, $page->hide_on);
          if($hidden_on_key == 'mobile_and_tablet') {
            $icon_class = 'mobile-devices';
          } else if($hidden_on_key == 'desktop_and_tablet') {
            $icon_class = 'desktop';
          } else {
            $icon_class = $hidden_on_key;
          }
          $title = __('edit.hidden_on.'.$hidden_on_key.'.title');
          $popup = 'edit.hidden_on.'.$hidden_on_key;
        @endphp
        <button class="mnm-edit-button mnm-background-red" tabindex="-1" title="{{$title}}" onclick="popup(__('{{$popup}}'));"><span class="icon-{{$icon_class}}"></span></button>
      @endif

      {{-- sledi povezavi - ker kliki na povezavah v načinu urejanja ne delujejo, naredimo za to poseben gumb --}}
      @if($uri['address'])
        <button class="mnm-edit-button"
                tabindex="-1"
                title="{{__('edit.simulate_click')}}"
                onclick="@if($uri['run_function']) appInstance.{{ $uri['run_function'].'(event)' }} @else mnm.followLink('{{$uri['address']}}', '{{$uri['target']}}', true, event) @endif"
        ><span class="icon-pointer"></span></button>
      @endif

      {{-- ikona, če je element vezana kopija nekega drugega elementa: da lahko direktno pridejo do tega elementa --}}
      @if($page->is_content_copy and !in_array($page->element_type_key, ['menu_holder']))
        <button class="mnm-edit-button mnm-background-orange"
                tabindex="-1"
                title="{{__('edit.content_copy.is', ['content_id' => $page->content_id]).LF.__('edit.content_copy.goto')}}"
                onclick="appInstance.$refs.editToolbar.selectElementFromHash('{{$page->content_page_uri_address}}', event)"
        ><span class="icon-linked"></span></button>
      @endif

      {{-- gumb za dodajanje novega elementa PRED ta element (da lahko vstavijo tudi brez miške) --}}
      <button class="mnm-edit-button"
              tabindex="-1"
              title="{{__('edit.insert_element_before')}}"
              onclick="appInstance.$refs.editToolbar.showEditInsertElementDialog(event, {{$page->parent_id}}, 'this', 'same_as_next', '{{$section}}');"
      ><span class="icon-arrow-up-left"></span></button>

      {{-- gumb za dodajanje novega elementa ZA ta element (da lahko vstavijo tudi brez miške) --}}
      <button class="mnm-edit-button mnm-edit-insert-after-button"
              tabindex="-1"
              title="{{__('edit.insert_element_after')}}"
              onclick="appInstance.$refs.editToolbar.showEditInsertElementDialog(event, {{$page->parent_id}}, 'next', 'same_as_previous', '{{$section}}');"
      ><span class="icon-arrow-down-right"></span></button>

    </div>

  </div>

  {{-- resize elementa; handlerji za to so v EditToolbar.vue --}}
  @if($resize_horizontal)
    <div @class(['mnm-edit-resize-holder', 'mnm-edit-resize-horizontal', 'mnm-edit-resize-set' => $page->width])
         title="{{__('edit.drag_to_resize')}}@if($page->valid_applicable_siblings_count > 0) {{"\n".__('edit.hold_ctrl_for_siblings')}} @endif"
    ></div>
  @endif
  @if($resize_vertical)
    <div @class(['mnm-edit-resize-holder', 'mnm-edit-resize-vertical', 'mnm-edit-resize-set' => $page->height]) title="{{__('edit.drag_to_resize')}}"></div>
  @endif

@endif