{% extends 'base.html' %}
{% load i18n %}
{% block title %}{{ title }}{% endblock %}

{% block page_header %}
    <div class="page-header" ng-cloak>
        <h1>{% trans "Template Generator" %}</h1>
        <p>{% trans "Please drag and drop resource icons into center canvas to define resource for template." %}</p>
    </div>
{% endblock %}

{% block main %}
<div ng-show="loading" class="col-xs-12 load-block" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.LoadingController">
    <md-icon md-svg-src="{$ basePath $}css/img/icons/spinner.svg" class="spinner"></md-icon>
</div>
<div ng-cloak>
        <div class="row table_action">

            <span flex></span>

            <div class="col-sm-11" style="height:80px;">
                <div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.AgentController" style="display:inline-block">
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>{% trans "Template Version" %}</label>
                        <md-select ng-model="template_version" ng-change="update_template_version(template_version)">
                            <md-option ng-repeat="tmptversion in template_versions" ng-value="tmptversion.id">
                                {$ tmptversion.name $}
                            </md-option>
                        </md-select>
                    </md-input-container>
                </div>
                <div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.TempModalController" style="display:inline-block">
                    <md-tooltip style="font-size:12px !important;" md-direction="top">{% trans "Template Generator" %}</md-tooltip>
                    <md-button class="md-fab md-mini md-primary" ng-click="open()" aria-label="Template Generator">
                        <md-icon md-svg-src="{$ basePath $}css/img/icons/file-text-o.svg"></md-icon>
                    </md-button>
                </div>
                <div class="md-menu" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.DraftMenuController" style="display:inline-block">
                    <md-tooltip style="font-size:12px !important;" md-direction="top">{% trans "Manage Drafts" %}</md-tooltip>
                    <md-menu>
                        <md-button class="md-fab md-mini" ng-click="openMenu($mdMenu, $event)" aria-label="Manage Drafts">
                            <md-icon md-svg-src="{$ basePath $}css/img/icons/floppy-o.svg"></md-icon>
                        </md-button>
                        <md-menu-content width="4" ng-mouseleave="closeMenu()">
                            <md-menu-item>
                              <md-button ng-click="save_draft()">
                                {% trans "Save Draft" %}
                              </md-button>
                            </md-menu-item>
                            <md-menu-item>
                              <md-button ng-click="load_draft()">
                                {% trans "Load Draft" %}
                              </md-button>
                            </md-menu-item>
                            <md-menu-divider></md-menu-divider>
                            <md-menu-item>
                              <md-button ng-click="import_draft()">
                                {% trans "Import Draft" %}
                              </md-button>
                            </md-menu-item>
                            <md-menu-item>
                              <md-button ng-click="export_draft()">
                                {% trans "Export Draft" %}
                              </md-button>
                            </md-menu-item>
                          </md-menu-content>
                    </md-menu>
                </div>
                <div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.ClearCanvasController" style="display:inline-block">
                    <md-tooltip style="font-size:12px !important;" md-direction="top">{% trans "Clear Canvas" %}</md-tooltip>
                    <md-button ng-click="clear_canvas()" class="md-fab md-mini md-warn"  aria-label="clear canvas">
                        <md-icon md-svg-src="{$ basePath $}css/img/icons/trash.svg"></md-icon>
                    </md-button>
                </div>
                <input id="draft-file" type="file" style="visibility:hidden" />
                <input id="template-file" type="file" style="visibility:hidden" />
            </div>
        </div>

        <div class="row table_action">

            <span flex></span>

            <!-- Icon Drag sidebar -->
            <div class="col-sm-11" style="text-align:center" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.IconController">
               <div draggable ng-repeat="(reskey, resobj) in resource_types" class="os-resource" draggable="true" id="{$ reskey $}" ng-if="admin || !resource_admin[reskey]">
                   <md-tooltip md-direction="top" style="font-size:12px !important;">{$ resobj.name $}</md-tooltip>
                   <md-icon style="height: 36px; width: 36px;" md-svg-src="{$ basePath $}js/resources/{$ reskey|lowercase $}/{$ reskey|lowercase $}.svg"></md-icon>
               </div>
            </div>
            <!-- End Drag sidebar -->
        </div>
        <div class="row table_action">

            <span flex></span>
             <!-- Drop Canvas -->
            <div class="col-sm-11" style="margin-bottom: 10%; min-height:400px; height: 500px">
                <div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.VisController" id="canvas_area" droppable>
                    <vis-network component="hotnetwork" data="data" options="options" events="events">
                    </vis-network>
                </div>
            </div>
        </div>
            <!-- End Drop Canvas -->

        <!-- Node Modal -->
        <div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.FormModalController"  class="md-padding" id="popupContainer" ng-cloak>
        </div>
        <!-- End Node Modal -->

        <!-- Edge Modal -->
        <div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.EdgeFormModalController"  class="md-padding" id="popupEdgeContainer" ng-cloak>
        </div>
        <!-- End Edge Modal -->

        <!-- Load Draft Modal -->
        <div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.DraftModalController"  class="md-padding" ng-cloak>
        </div>
        <!-- End Load Draft Modal -->
</div>
{% endblock %}
