<div id="create-dashboard-container" class="row">
    <div class="create-box col-md-12">
        <input type="text" placeholder="{{ 'dashboards.headers.DASHBOARD_NAME' | translate }}" ng-model="dashboardName" class="dashborad-input col-md-2" />
        <?php
            if($user->getUserType() === USER_TYPES['BROKER']){
                require_once('PublicPrivateDashboard.php');
            }
        ?>
    </div>

    <div ng-if="!viewGadgets" class="dashborad-gadgets">
        <div class="gadget-layer col-md-6" ng-repeat="gadget in selectedGadgets">
            <div class="gadget">
                <h3 class="col-md-12">{{gadget.name}}</h3>
                <div class="drop-zone"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'gadgetDropped(gadget)'}">
                    {{ 'dashboards.buttons.DROP' | translate }}
                </div>
                <div id="selected-gadget-{{gadget.idGadget}}"
                    class="drag-gadget"
                    idGadget="{{gadget.idGadget}}"
                    data-drag="true"
                    jqyoui-draggable="{animate:true, onStart:'gadgetDragStart()', onStop:'gadgetDragStop()', scroll: false}"
                    data-jqyoui-options="{revert: true}">
                    <span class="glyphicon glyphicon-move"></span>
                    {{ 'dashboards.buttons.DRAG' | translate }}
                </div>
                <div class="remove-gadget btn btn-danger" ng-click="removeGadget(gadget)">
                    <span class="remove-gadget-icon glyphicon glyphicon-minus"></span>
                    {{ 'dashboards.buttons.REMOVE_GADGET' | translate }}
                </div>
            </div>
        </div>

        <div class="gadget-layer col-md-6">
            <div class="gadget">
                <div class="add-gadget" ng-click="showHideGadgets()">
                    <span class="add-gadget-icon glyphicon glyphicon-plus"></span>
                    {{ 'dashboards.buttons.ADD_GADGET' | translate }}
                </div>
            </div>
        </div>
    </div>

    <div ng-if="viewGadgets" class="slect-gadgets">
        <div class="col-md-4" ng-repeat="gadget in gadgets">
            <div class="gadget">
                <h3 class="col-md-12">{{gadget.name}}</h3>
                <div class="gadget-description col-md-8">
                    {{ 'dashboards.gadgets.' + gadget.module + '.DESCRIPTION' | translate }}
                </div>
                <div class="col-md-4">
                    <div ng-if="!gadget.isSelected" class="btn btn-primary" ng-click="addGadget(gadget)">
                        <span class="glyphicon glyphicon-plus"></span>
                        {{ 'dashboards.buttons.ADD_TO_DASHBOARD' | translate }}
                    </div>
                    <div ng-if="gadget.isSelected" class="alert alert-success">
                        {{ 'dashboards.messages.GADGET_ALREADY_IN_DASHBOARD' | translate }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="create-box col-md-12">
        <div ng-if="!viewGadgets" class="btn btn-primary" ng-click="createDashboard()">
            <span class="glyphicon glyphicon-plus"></span>
            {{ 'dashboards.buttons.' + getButtonTranslationKey() | translate }}
        </div>

        <div ng-if="viewGadgets" class="btn btn-danger" ng-click="showHideGadgets()">
            <span class="glyphicon glyphicon-chevron-left"></span>
            {{ 'dashboards.buttons.BACK' | translate }}
        </div>
    </div>
</div>
