<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

<f:layout name="Module" />

<f:section name="Content">

    <f:if condition="{currentDashboard.widgets}">
        <f:then>
            <div class="dashboard-grid">
                <f:for each="{currentDashboard.widgets}" as="widget" iteration="widgetIterator" key="widgetHash">
                    <div
                        class="dashboard-item dashboard-item--w-{widget.width} dashboard-item--h-{widget.height} {widget.additionalCssClasses} dashboard-item--enableSelect"
                        data-widget-hash="{widgetHash}"
                        data-widget-key="{widget.identifier}"
                    >
                        <div class="dashboard-item-content">
                            <div class="widget widget-identifier-{widget.identifier}">
                                <div class="widget-waiting">
                                    <core:icon identifier="spinner-circle" size="large"/>
                                </div>
                                <div class="widget-content hide"></div>
                                <div class="widget-error hide">
                                    <f:translate key="LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.error" />
                                </div>
                                <div class="widget-actions">
                                    <f:if condition="{currentDashboard.widgetOptions.{widgetHash}.refreshAvailable}">
                                        <typo3-dashboard-widget-refresh>
                                            <button type="button" class="widget-action widget-action-refresh btn btn-link">
                                                <core:icon identifier="actions-refresh" alternativeMarkupIdentifier="inline"/>
                                            </button>
                                        </typo3-dashboard-widget-refresh>
                                    </f:if>
                                    <div class="widget-action widget-action-move js-dashboard-move-widget">
                                        <core:icon identifier="actions-move" alternativeMarkupIdentifier="inline"/>
                                    </div>
                                    <f:be.link
                                        class="widget-action widget-action-remove js-dashboard-remove-widget"
                                        route="dashboard" parameters="{action: 'removeWidget', widgetHash: widgetHash}"
                                        data="{
                                            modal-title: '{f:translate(key: \'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.remove.confirm.title\')}',
                                            modal-question: '{f:translate(key: \'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.remove.confirm.message\')}',
                                            modal-ok: '{f:translate(key: \'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.remove.button.ok\')}',
                                            modal-cancel: '{f:translate(key: \'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.remove.button.close\')}'
                                        }"
                                    >
                                        <core:icon identifier="actions-delete" alternativeMarkupIdentifier="inline"/>
                                    </f:be.link>
                                </div>
                            </div>
                        </div>
                    </div>
                </f:for>
            </div>
        </f:then>
        <f:else>
            <div class="dashboard-empty">
                <div class="dashboard-empty-content">
                    <h3><f:translate key="LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:dashboard.empty.content.title" /></h3>
                    <p><f:translate key="LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:dashboard.empty.content.description" /></p>
                    <button
                        class="js-dashboard-addWidget btn dashboard-button hide"
                        title="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add')}"
                        data-modal-title="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add')}"
                        data-button-close-text="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add.button.close')}"
                        data-button-ok-text="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add.button.ok')}"
                    >
                        <span class="dashboard-button-icon"><core:icon identifier="actions-add" alternativeMarkupIdentifier="inline" /></span>
                        <span class="dashboard-button-text"><f:translate key="LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:dashboard.empty.content.button" /></span>
                    </button>
                </div>
            </div>
        </f:else>
    </f:if>

    <div class="dashboard-add-item">
        <button
            class="js-dashboard-addWidget btn dashboard-button dashboard-button-add hide"
            title="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add')}"
            data-modal-title="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add')}"
            data-button-close-text="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add.button.close')}"
            data-button-ok-text="{f:translate(key: 'LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add.button.ok')}"
        >
            <core:icon identifier="actions-add" alternativeMarkupIdentifier="inline" /><span class="visually-hidden"><f:translate key="LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:widget.add" /></span>
        </button>
    </div>

    <template id="widgetSelector">
        <div class="dashboard-modal-tabpanel" role="tabpanel">
            <ul class="nav nav-tabs t3js-tabs" id="widget-selector" role="tablist">
                <f:variable name="firstGroupActive" value="false" />
                <f:for each="{widgetGroups}" as="groupConfiguration" iteration="iterator">
                    <f:if condition="{groupConfiguration.widgets}">
                        <li class="t3js-tabmenu-item nav-item">
                            <a
                                id="dashboard-widgetgroup-tab-{groupConfiguration.identifier}"
                                class="nav-link {f:if(condition: '{firstGroupActive} == \'false\'', then: 'active')}"
                                data-bs-toggle="tab"
                                href="#dashboard-widgetgroup-{groupConfiguration.identifier}"
                                role="tab"
                                aria-controls="dashboard-widgetgroup-{groupConfiguration.identifier}"
                                aria-selected="true"
                            >{groupConfiguration.title}</a>
                        </li>
                        <f:variable name="firstGroupActive" value="true" />
                    </f:if>
                </f:for>
            </ul>
            <div class="tab-content">
                <f:variable name="firstGroupActive" value="false" />
                <f:for each="{widgetGroups}" as="groupConfiguration" iteration="iterator">
                    <f:if condition="{groupConfiguration.widgets}">
                        <div
                            class="tab-pane {f:if(condition: '{firstGroupActive} == \'false\'', then: 'active')}"
                            id="dashboard-widgetgroup-{groupConfiguration.identifier}"
                            role="tabpanel"
                            aria-labelledby="dashboard-widgetgroup-{groupConfiguration.identifier}-tab"
                        >
                            <div class="dashboard-modal-items ">
                                <f:for each="{groupConfiguration.widgets}" as="widgetConfiguration" key="widgetIdentifier">
                                    <div class="dashboard-modal-item">
                                        <f:be.link class="dashboard-modal-item-block" route="dashboard" target="list_frame" parameters="{action: 'addWidget', widget: widgetIdentifier}">
                                            <f:if condition="{widgetConfiguration.iconIdentifier}">
                                                <div class="dashboard-modal-item-icon">
                                                    <core:icon size="medium" alternativeMarkupIdentifier="inline" identifier="{widgetConfiguration.iconIdentifier}"/>
                                                </div>
                                            </f:if>
                                            <div class="dashboard-modal-item-details">
                                                <div class="dashboard-modal-item-title">
                                                    {widgetConfiguration.title}
                                                </div>
                                                <f:if condition="{widgetConfiguration.description}">
                                                    <div class="dashboard-modal-item-description">
                                                        {widgetConfiguration.description}
                                                    </div>
                                                </f:if>
                                            </div>
                                        </f:be.link>
                                    </div>
                                </f:for>
                            </div>
                        </div>
                        <f:variable name="firstGroupActive" value="true" />
                    </f:if>
                </f:for>
            </div>
        </div>
    </template>

    <template id="dashboardModal-add">
        <form action="{addDashboardUri}" id="formAddDashboard" class="dashboardModal-form" target="list_frame" method="post">
            <div class="form-group">
                <label for="dashboardModalAdd-title"><f:translate key="LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:dashboard.title" /></label>
                <input class="form-control" id="dashboardModalAdd-title" type="text" name="dashboard-title" required="required">
            </div>

            <div class="dashboard-modal-items">
                <f:variable name="dashboardShown" value="false" />
                <f:for each="{dashboardPresets}" as="availableDashboardPreset" key="availableDashboardKey">
                    <f:if condition="{availableDashboardPreset.showInWizard}" >
                        <div class="dashboard-modal-item">
                            <input
                                type="radio"
                                name="dashboard"
                                value="{availableDashboardKey}"
                                checked="checked"
                                {f:if(condition: dashboardShown, then: '', else: 'checked="checked"')}
                                class="dashboard-modal-item-checkBox"
                                id="dashboardKey-{availableDashboardKey}"
                            >
                            <label for="dashboardKey-{availableDashboardKey}" class="dashboard-modal-item-block">
                                <f:if condition="{availableDashboardPreset.iconIdentifier}">
                                    <span class="dashboard-modal-item-icon">
                                        <core:icon size="medium" alternativeMarkupIdentifier="inline" identifier="{availableDashboardPreset.iconIdentifier}"/>
                                    </span>
                                </f:if>
                                <span class="dashboard-modal-item-details">
                                    <span class="dashboard-modal-item-title">
                                        {availableDashboardPreset.title}
                                    </span>
                                    <f:if condition="{availableDashboardPreset.description}">
                                        <span class="dashboard-modal-item-description">
                                                {availableDashboardPreset.description}
                                        </span>
                                    </f:if>
                                </span>
                            </label>
                            <f:variable name="dashboardShown" value="true" />
                        </div>
                    </f:if>
                </f:for>
            </div>
        </form>
    </template>

    <template id="dashboardModal-configure">
        <form action="{configureDashboardUri}" id="configureDashboardForm" class="dashboardModal-form" target="list_frame" method="post">
            <input type="hidden" name="currentDashboard" value="{currentDashboard.identifier}">
            <div class="form-group">
                <label for="dashboardModalConfigure-title"><f:translate key="LLL:EXT:dashboard/Resources/Private/Language/locallang.xlf:dashboard.title" /></label>
                <input class="form-control" id="dashboardModalConfigure-title" type="text" name="dashboard[title]" value="{currentDashboard.title}" required="required">
            </div>
        </form>
    </template>

</f:section>

</html>
