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

<f:section name="content">
    <f:for each="{availableGraphTypes}" as="availableGraphType">
        <f:link.action action="index" arguments="{type: availableGraphType}" class="neos-button{f:if(condition: '{availableGraphType} == {type}', then: ' neos-active')}">
          <neos:backend.translate id="dimensions.{availableGraphType}.short" source="Modules" />
        </f:link.action>
    </f:for>
    <br /><br />
    <f:if condition="{graph}">
        <legend><neos:backend.translate id="dimensions.{type}.legend" source="Modules" /></legend>
        <p><f:format.nl2br><neos:backend.translate id="dimensions.{type}.description" source="Modules" /></f:format.nl2br></p>
        <div id="graph" style="position: relative; width: 100%; height: 100%; overflow:scroll">
            <f:render section="{type}" arguments="{_all}" />
        </div>
    </f:if>

    <script src="{f:uri.resource(path:'resource://Neos.Neos/Public/JavaScript/Module/Administration/Dimension.js')}"></script>
</f:section>

<f:section name="intraDimension">
    <svg id="graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="{graph.width}px" height="{graph.height}px" style="position:relative; padding-top:50px;">
        <f:for each="{graph.dimensions}" as="dimension">
            <f:for each="{dimension.nodes}" as="node">
                <circle cx="{node.x}" cy="{node.y}" r="40" stroke="#FFFFFF" stroke-width="2" fill="{node.color}" />
            </f:for>
            <f:for each="{dimension.edges}" as="edge">
                <line x1="{edge.x1}" y1="{edge.y1}" x2="{edge.x2}" y2="{edge.y2}" stroke-width="2" stroke="#FFFFFF"/>
            </f:for>
        </f:for>
    </svg>
    <f:for each="{graph.dimensions}" as="dimension">
        <h2 style="position: absolute; top: 10px; left:{dimension.offset}px;">{dimension.label}</h2>
        <f:for each="{dimension.nodes}" as="node">
            <div style="position: absolute; top: {node.textY}px; left:{node.textX}px; width: 80px; text-align: center; pointer-events: none;">{node.name}</div>
        </f:for>
    </f:for>
  </f:section>

<f:section name="interDimension">
    <svg id="graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="{graph.width}px" height="{graph.height}px" style="position:relative; padding-top:50px;">
      <f:for each="{graph.edges}" as="edge">
          <line x1="{edge.x1}" y1="{edge.y1}" x2="{edge.x2}" y2="{edge.y2}" stroke-width="2" stroke="{edge.color}" opacity="{edge.opacity}" style="{edge.style}" data-from="{edge.from}" data-to="{edge.to}"/>
      </f:for>
        <f:for each="{graph.nodes}" as="node" key="subgraphIdentifier">
            <f:if condition="{selectedSubgraphIdentifier} == {subgraphIdentifier}">
                <f:then>
                    <f:link.action action="index" arguments="{type: type}">
                        <circle id="{node.id}" cx="{node.x}" cy="{node.y}" r="40" stroke="#FFFFFF" stroke-width="2" fill="{node.color}" />
                    </f:link.action>
                </f:then>
                <f:else>
                    <f:link.action action="index" arguments="{type: type, subgraphIdentifier: subgraphIdentifier}">
                        <circle id="{node.id}" cx="{node.x}" cy="{node.y}" r="40" stroke="#FFFFFF" stroke-width="2" fill="{node.color}" />
                    </f:link.action>
                </f:else>
            </f:if>
        </f:for>
    </svg>
    <f:for each="{graph.nodes}" as="node" key="subgraphIdentifier">
        <f:if condition="{selectedSubgraphIdentifier} == {subgraphIdentifier}">
            <f:then>
                <f:link.action action="index" arguments="{type: type}">
                    <div style="position: absolute; top: {node.textY}px; left:{node.textX}px; width: 80px; text-align: center; pointer-events: none;">{node.name}</div>
                </f:link.action>
            </f:then>
            <f:else>
                <f:link.action action="index" arguments="{type: type, subgraphIdentifier: subgraphIdentifier}">
                    <div style="position: absolute; top: {node.textY}px; left:{node.textX}px; width: 80px; text-align: center; pointer-events: none;">{node.name}</div>
                </f:link.action>
            </f:else>
        </f:if>
    </f:for>
</f:section>