<%
var data = locals.data;
var item = _.extend({},data);
var hasRole;
if(item.page){
  item = _.extend({},get_page(item.page),item);
}
var url = item.href_full;
var itemAttr = '';

if(item.href_full){
  itemAttr = 'target="_blank"';
}

if(!url && item.path){
  url = get_path(item.path);
}

%>


<div flex="100" class="page-card" class="page-card" layout="column">
  <%-template('ui/has-role',{authorization:item.authorization})%>
  <div flex="100" class="container" layout="column">

    <div class="header" layout="row">
      <%if(item.icon){%>
        <div>
        <md-icon aria-label="<%-lng(item.title)%>" class="card-icon" md-svg-src="<%-get_icon(item.icon)%>">
        </md-icon>
        </div>
        <%}%>

        <div layout="column">
          <a <%-itemAttr%> ng-href="<%-url%>">
            <span class="md-headline"><%-lng(item.title)%></span>
          </a>
          <span class="md-subhead"><%-lng(item.description)%></span>
        </div>

      </div>
      <div layout="column">

        <%
        if(item.menu){

          for(var menuItem of item.menu){

            var option = menuItem;
            var optionURL = null;
            var optionAttr = '';
            var optionClick = null;

            if(menuItem.page){
              option = _.extend({},get_page(menuItem.page),option);
            }

            if(option.href_full){
              optionURL = option.href_full;
              optionURL = render(optionURL);
              optionAttr = 'target="_blank"';
            }

            if(option.click){
              optionClick = `ng-click="${option.click}"`;
            }

            if(!optionURL){
              optionURL = option.path && get_path(option);
            }

            %>
            <div class="menu">

              <a
              layout="row"
              layout-align="start center"
              layout-margin
              class="ag-list-item"
              <%-optionAttr%>
              <%-optionClick%>
              ng-href="<%-optionURL%>"
              >

              <%-template('ui/has-role',{authorization:option.authorization})%>

              <%if(option.icon){%>
                <md-icon md-svg-src="<%-get_icon(option.icon)%>"></md-icon>
                <%}%>

                <span flex="auto"><%-lng(option.title)%></span>

                <%if(menuItem.menu){
                  for(var item of menuItem.menu){
                    var page = get_page(item.page);
                    %>
                    <md-button class="option-item md-raised" ng-href="<%-get_path(page)%>"><%-lng(item.title||page.title)%></md-button>
                <%}%>
                <%}%>

                </a>

                  </div>

                  <%}}%>
                </div>

                <span flex="auto"></span>

                <%if(url){%>
                <div layout="row" layout-align="end center">
                  <md-button class="md-primary" <%-itemAttr%> ng-href="<%-url%>" >
                    <md-icon aria-label="more" md-svg-src="<%-get_icon('material/add')%>">
                    </md-icon>
                    <span>More</span>
                  </md-button>
                </div>
                <%}%>

              </div>
            </div>
