<script type="text/javascript">
    widgetsHelper.availableWidgets = {{ availableWidgets|raw }};
    $(function() {
        initDashboard({{ dashboardId }}, {{ dashboardLayout|raw }});
    });
</script>
<div id="dashboard">
    <div class="ui-confirm" id="confirm">
        <h2>{{ 'Dashboard_DeleteWidgetConfirm'|translate }}</h2>
        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
    </div>

    <div class="ui-confirm" id="setAsDefaultWidgetsConfirm">
        <h2>{{ 'Dashboard_SetAsDefaultWidgetsConfirm'|translate }}</h2>
        {% set resetDashboard %}{{ 'Dashboard_ResetDashboard'|translate }}{% endset %}
        <div class="popoverSubMessage">{{ 'Dashboard_SetAsDefaultWidgetsConfirmHelp'|translate(resetDashboard) }}</div>
        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
    </div>

    <div class="ui-confirm" id="resetDashboardConfirm">
        <h2>{{ 'Dashboard_ResetDashboardConfirm'|translate }}</h2>
        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
    </div>

    <div class="ui-confirm" id="dashboardEmptyNotification">
        <h2>{{ 'Dashboard_DashboardEmptyNotification'|translate }}</h2>
        <input role="addWidget" type="button" value="{{ 'Dashboard_AddAWidget'|translate }}"/>
        <input role="resetDashboard" type="button" value="{{ 'Dashboard_ResetDashboard'|translate }}"/>
    </div>

    <div class="ui-confirm" id="changeDashboardLayout">
        <h2>{{ 'Dashboard_SelectDashboardLayout'|translate }}</h2>

        <div id="columnPreview">
            {% for layout in availableLayouts %}
            <div>
                {% for column in layout %}
                <div class="width-{{ column }}"><span></span></div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
        <input role="yes" type="button" value="{{ 'General_Save'|translate }}"/>
    </div>

    <div class="ui-confirm" id="renameDashboardConfirm">
        <h2>{{ 'Dashboard_RenameDashboard'|translate }}</h2>

        <div id="newDashboardNameInput"><label for="newDashboardName">{{ 'Dashboard_DashboardName'|translate }} </label>
            <input type="input" name="newDashboardName" id="newDashboardName" value=""/>
        </div>
        <input role="yes" type="button" value="{{ 'General_Save'|translate }}"/>
        <input role="cancel" type="button" value="{{ 'General_Cancel'|translate }}"/>
    </div>

    {% if isSuperUser %}
        <div class="ui-confirm" id="copyDashboardToUserConfirm">
            <h2>{{ 'Dashboard_CopyDashboardToUser'|translate }}</h2>

            <div class="inputs">
                <label for="copyDashboardName">{{ 'Dashboard_DashboardName'|translate }} </label>
                <input type="input" name="copyDashboardName" id="copyDashboardName" value=""/>
                <label for="copyDashboardUser">{{ 'General_Username'|translate }} </label>
                <select name="copyDashboardUser" id="copyDashboardUser"></select>
            </div>
            <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
            <input role="cancel" type="button" value="{{ 'General_Cancel'|translate }}"/>
        </div>
    {% endif %}

    <div class="ui-confirm" id="createDashboardConfirm">
        <h2>{{ 'Dashboard_CreateNewDashboard'|translate }}</h2>

        <div id="createDashboardNameInput">
            <label>{{ 'Dashboard_DashboardName'|translate }} <input type="input" name="newDashboardName" id="createDashboardName" value=""/></label><br/>

            <label for="dashboard_type_default">
                <input type="radio" checked="checked" name="type" value="default" id="dashboard_type_default" />
                {{ 'Dashboard_DefaultDashboard'|translate }}
            </label>
            <br/><br/>

            <label for="dashboard_type_empty">
                <input type="radio" name="type" value="empty" id="dashboard_type_empty" />
                {{ 'Dashboard_EmptyDashboard'|translate }}
            </label>
        </div>
        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
    </div>

    <div class="ui-confirm" id="removeDashboardConfirm">
        <h2>{{ 'Dashboard_RemoveDashboardConfirm'|translate('<span></span>')|raw }}</h2>

        <div class="popoverSubMessage">{{ 'Dashboard_NotUndo'|translate(resetDashboard) }}</div>
        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
    </div>

    {% include "@Dashboard/_widgetFactoryTemplate.twig" %}

    <div id="dashboardWidgetsArea"></div>
</div>