<div layout="row" class="top-bar ag-margin" layout="start center">

  <md-button ng-click="pageAdd()" ng-show="template" class="md-primary">
    <md-icon md-svg-icon="<%-get_icon('material/add')%>"></md-icon>
    <span>New</span>
  </md-button>

  <md-button ng-click="push()" class="md-primary">
    <md-icon md-svg-src="<%-get_icon('material/file-upload')%>"></md-icon>
    <span>Push</span>
  </md-button>

  <span flex></span>

  <md-select md-offset="0 80" ng-model="edit.lang" placeholder="Language" class="md-no-underline">
    <%for(var language of config.languages){%>
    <md-option value="<%-language.key%>"><%-language.value%></md-option>
    <%}%>
  </md-select>

  <md-button aria-label="Refresh" class="md-icon-button" ng-click="getPage()">
    <md-icon md-svg-src="<%-get_icon('material/refresh')%>"></md-icon>
  </md-button>

  <md-menu class="settings" md-offset="0 40">
    <md-button aria-label="Open editing settings" class="md-icon-button" ng-click="$mdMenu.open()">
      <md-icon md-menu-origin md-svg-src="<%-get_icon('material/settings')%>"></md-icon>
    </md-button>
    <md-menu-content width="4" class="md-padding">
      <md-menu-item>
        <md-checkbox ng-model="edit.realtime" aria-label="Enable Real-time">
          Real-time updates (beta)
        </md-checkbox>
      </md-menu-item>
    </md-menu-content>
  </md-menu>

</div>

<div layout="column" class="page-main" ng-class="{active:page}">

  <div layout="row" class="heading" layout="start center" layout-margin>
    <%if(page.editor&&page.editor.toolbar){%>
      <%-template(page.editor.toolbar)%>
        <%}%>
          <span flex></span>

          <md-button ng-click="save()" class="md-primary">
            <md-icon md-svg-src="<%-get_icon('material/save')%>"></md-icon>
            <span>Save</span>
          </md-button>

          <md-button ng-click="pageDelete()" class="md-warn">
            <md-icon md-svg-icon="<%-get_icon('material/delete')%>"></md-icon>
            <span>Delete</span>
          </md-button>

          <md-button class="md-primary" aria-label="Switch Source" ng-click="openSource()">
            Source
          </md-button>

  </div>

  <div class="edit-gui" ng-show="!sourceEnabled">
    <div class="general-info">
      <div ng-if="page.path" layout="row" layout-align="start center">
        <label>Path:</label>
        <p class="path">{{page.path}}</p>
        <span flex="auto"></span>
      </div>
    </div>
    <%-template('edit/content/data')%>
      <%-template('edit/content/content')%>
  </div>

</div>

<%-template('edit/content/messages')%>
<%-template('edit/content/field-menu')%>
