{namespace neos=Neos\Neos\ViewHelpers}
<f:layout name="Default"/>

<f:section name="Title">
    <img src="{f:uri.resource(path: 'resource://Flowpack.Neos.Matomo/Public/Images/matomo-white.svg')}"
         alt="Matomo Logo">
</f:section>
<f:section name="Content">
    <br>
    <div class="neos-row-fluid">
        <div class="neos-span8">
            <div class="neos-control-group">
                <h3><neos:backend.translate id="header.host" package="Flowpack.Neos.Matomo"/></h3>
                <table class="neos-table">
                    <tr>
                        <td><neos:backend.translate id="label.host" package="Flowpack.Neos.Matomo"/></td>
                        <td>{settings.host}</td>
                    </tr>
                    <tr>
                        <td><neos:backend.translate id="label.protocol" package="Flowpack.Neos.Matomo"/></td>
                        <td>
                            {settings.protocol}
                            <f:if condition="{settings.protocol} != 'https'">
                                <span data-toggle="modal" class="neos-inline neos-button neos-button-small"
                                      href="#protocol-modal">?</span>
                            </f:if>

                            <div class="neos-hide" id="protocol-modal">
                                <div class="neos-modal">
                                    <div class="neos-modal-header">
                                        <button type="button" class="neos-close neos-button" data-dismiss="modal"></button>
                                        <div class="neos-header">Warning</div>
                                    </div>
                                    <div class="neos-subheader">
                                        <p>
                                            <neos:backend.translate id="warning.http" package="Flowpack.Neos.Matomo" arguments="{0: settings.host}"/>
                                        </p>
                                    </div>
                                    <div class="neos-modal-footer">
                                        <a href="#" class="neos-button" data-dismiss="modal"><neos:backend.translate id="confirmation.ok" package="Flowpack.Neos.Matomo"/></a>
                                    </div>
                                </div>
                                <div class="neos-modal-backdrop neos-in"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><neos:backend.translate id="label.ip" package="Flowpack.Neos.Matomo"/></td>
                        <td>
                            <f:if condition="{matomoHost.ip.value}">
                                <f:then>
                                    {matomoHost.ip.value} <i class="icon icon-check-circle-o"></i>
                                </f:then>
                                <f:else>
                                    <i><neos:backend.translate id="warning.ip" package="Flowpack.Neos.Matomo"/></i> <i class="icon icon-exclamation-triangle"></i>
                                </f:else>
                            </f:if>
                        </td>
                    </tr>
                    <tr>
                        <td><neos:backend.translate id="label.version" package="Flowpack.Neos.Matomo"/></td>
                        <td>
                            <f:if condition="{matomoHost.version.value}">
                                <f:then>
                                    {matomoHost.version.value} <i class="icon icon-check-circle-o"></i>
                                </f:then>
                                <f:else>
                                    <i><neos:backend.translate id="warning.version" package="Flowpack.Neos.Matomo"/></i> <i class="icon icon-exclamation-triangle"></i>
                                </f:else>
                            </f:if>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="neos-control-group">
                <h3><neos:backend.translate id="header.tokens" package="Flowpack.Neos.Matomo"/></h3>
                <table class="neos-table">
                    <tr>
                        <th><neos:backend.translate id="label.sitename" package="Flowpack.Neos.Matomo"/></th>
                        <th><neos:backend.translate id="label.token" package="Flowpack.Neos.Matomo"/></th>
                    </tr>
                    <f:for each="{tokens}" key="sitename" as="token">
                        <tr>
                            <td>{sitename}</td>
                            <td>{token}</td>
                        </tr>
                    </f:for>
                </table>
            </div>

            <div class="neos-control-group">
                <h3><neos:backend.translate id="header.mapping" package="Flowpack.Neos.Matomo"/></h3>
                <table class="neos-table">
                    <tr>
                        <th><neos:backend.translate id="label.sitename" package="Flowpack.Neos.Matomo"/></th>
                        <th><neos:backend.translate id="label.siteid" package="Flowpack.Neos.Matomo"/></th>
                        <th><neos:backend.translate id="label.matomositename" package="Flowpack.Neos.Matomo"/></th>
                    </tr>
                    <f:for each="{sites}" key="sitename" as="site">
                        <tr>
                            <td>{sitename}</td>
                            <td>{site.id}</td>
                            <td>
                                <f:if condition="{site.matomoName.0}">
                                    <f:then>
                                        {site.matomoName.0.name} <i class="icon icon-check-circle-o"></i>
                                    </f:then>
                                    <f:else>
                                        <i>{site.matomoName.message}</i> <i class="icon icon-exclamation-triangle"></i>
                                    </f:else>
                                </f:if>
                            </td>
                        </tr>
                    </f:for>
                </table>
            </div>
        </div>
    </div>
</f:section>