<h4 class="bg-primary position-relative">Edit the layout of the remote's entertainment main screen
  <span ng-if="optHelpShow" class="programming-help-btn heading"><i class="fa fa-lg fa-question-circle" ng-click="$event.preventDefault(); $event.stopPropagation(); showHelpModal('edit-entertainment-menu-edit-layout')"></i></span></h4>

<p>Select a button to edit it. You can move, rename or delete it.</p>

<div class="row">
  <div class="col-md-5">
    <div class="radio">
      <label>
        <input type="radio" ng-model="mainMenu.showBtnsType" value="devices">
        Show Entertainment devices
      </label>
    </div>
  </div>
  <div class="col-md-7">
    <div class="radio">
      <label>
        <input type="radio" ng-model="mainMenu.showBtnsType" value="events">
        Show Scheduled entertainment events
      </label>
    </div>
  </div>
</div>

<div class="row" ng-if="mainMenu.showBtnsType === 'devices'">
  <div class="col-xs-10">
    <ul class="list-unstyled main-menu-page" ng-model="mainMenu.mainDevice.btns" ui-sortable>
      <li class="main-menu-page-item margin-bottom-sm"
          ng-repeat="btn in mainMenu.mainDevice.btns track by btn.id"   
          btn-radio="makeCopy(btn)" ng-model="mainMenu.selectedBtn">
        <img class="img-responsive" ng-src="images/device_icons/{{btn.image_name || 'OTHER' | encodeURIComponent}}.png" alt="">
        <span class="main-menu-btn-name" <!-- ng-class="{'zero-opacity': btn.hidden_option}" -->>{{btn.display_text}}</span>
      </li>
    </ul>
  </div>

  <div class="col-xs-2" ng-if="!isEmpty(mainMenu.selectedBtn)">
    <a data-backdrop="static" data-template="views/modal-tpls/main-edit-btn.html" bs-modal><i class="fa fa-fw fa-lg fa-pencil action-icon"></i></a>
    <a data-template="views/modal-tpls/main-delete-btn.html" bs-modal><i class="fa fa-fw fa-lg fa-trash-o action-icon"></i></a>
  </div>
</div>

<div class="row" ng-if="mainMenu.showBtnsType === 'events'">
  <div class="col-xs-10">
    <ul class="list-unstyled main-menu-page" ng-model="mainMenu.scheEvents" ui-sortable>
      <li class="main-menu-page-item margin-bottom-sm"
          ng-repeat="event in mainMenu.scheEvents track by event.id"
          btn-radio="makeCopy(event)" ng-model="mainMenu.selectedEvent">
        <img class="img-responsive" ng-src="images/device_icons/{{event.image_name || 'OTHER' | encodeURIComponent}}.png" alt="">
        <span class="main-menu-btn-name" ng-class="{'zero-opacity': event.hidden_option}">{{event.display_text}}</span>
      </li>
    </ul>
  </div>

  <div class="col-xs-2" ng-if="!isEmpty(mainMenu.selectedEvent)">
    <a data-backdrop="static" data-template="views/modal-tpls/main-edit-event.html" bs-modal><i class="fa fa-fw fa-lg fa-pencil action-icon"></i></a>
    <a data-template="views/modal-tpls/main-delete-event.html" bs-modal><i class="fa fa-fw fa-lg fa-trash-o action-icon"></i></a>
  </div>
</div>

<div class="left-and-right">
  <go-back></go-back>
  <button class="btn btn-primary" ng-disabled="mainMenu.showBtnsType === 'events' && !mainMenu.scheEvents.length" ng-click="finish()">Finish</i></button>
</div>
