<div id="dashboard" vue-directive="Dashboard.Dashboard" vue-directive-value="{{ {idDashboard: dashboardId}|json_encode }}">
    <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_No'|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_No'|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_No'|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 %}
            <br class="clearfix" />
        </div>
        <input role="yes" type="button" value="{{ 'General_Save'|translate }}"/>
        <input role="cancel" type="button" value="{{ 'General_Cancel'|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="text" 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 hasSomeAdminAccess %}
        <div class="ui-confirm" id="copyDashboardToUserConfirm">
            <h2>{{ 'Dashboard_CopyDashboardToUser'|translate }}</h2>

            <div class="inputs">
                <div class="row">
                    <div class="col s12 m6"><label for="copyDashboardName">{{ 'Dashboard_DashboardName'|translate }} </label></div>
                    <div class="col s12 m6"><input type="text" name="copyDashboardName" id="copyDashboardName" value=""/></div>
                </div>
                <div class="row">
                    <div class="col s12 m6"><label for="copyDashboardUser">{{ 'General_Username'|translate }} </label></div>
                    <div class="col s12 m6"><select class="browser-default" name="copyDashboardUser" id="copyDashboardUser">
                            <option>{{ 'General_LoadingData'|translate }}</option></select></div>
                </div>
            </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">
            <p>
                <label>{{ 'Dashboard_DashboardName'|translate }} </label>
                <input type="text" name="newDashboardName" id="createDashboardName" value=""/>
            </p>
            <p>
                <label>
                    <input type="radio" checked="checked" name="type" value="default" id="dashboard_type_default" />
                    <span>{{ 'Dashboard_DefaultDashboard'|translate }}</span>
                </label>
            </p>
            <p>
                <label>
                    <input type="radio" name="type" value="empty" id="dashboard_type_empty" />
                    <span>{{ 'Dashboard_EmptyDashboard'|translate }}</span>
                </label>
            </p>
        </div>
        <input role="yes" type="button" value="{{ 'General_Ok'|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_No'|translate }}"/>
    </div>

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

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