@extends('frame')

@section('title', 'The Dash | Edit Navigation')

@section('main-content')
  <article class="navigation">
      <section id="nav-items">
          @foreach($menu as $item)
              <div id="{{ $item['id'] }}" class="nav-item" data-slug="{{ $item['slug'] }}" data-uuid="{{ $item['uuid'] }}" data-path="{{ $item['id'] }}">
                  <svg id="move-menu-item" class="icon">
                        <use id="move-menu-item" xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
                    </svg>
                  <label>{{ $item['title'] }}</label>
                  <div id="nav-btns">
                      <button id="edit-item" class="nav-btn" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" title="edit page">
                          <svg id="edit-item" class="icon" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}">
                              <use id="edit-item" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" xlink:href="/assets/images/global/sprite.svg#entypo-edit"/>
                          </svg>
                      </button>
                      <button id="remove-item" class="nav-btn" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" title="delete from menu">
                          <svg id="remove-item" class="icon" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}">
                              <use id="remove-item" data-uuid="{{ $item['uuid'] }}" data-id="{{ $item['id'] }}" xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
                          </svg>
                      </button>
                  </div>
              </div>
          @endforeach
      </section>
  </article>
@endsection
@section('scripting')
    <script type="module" src="/assets/scripts/dash/app/EditNav.js"></script>
  @endsection