{namespace fsc=Sitegeist\FluidStyleguide\Components}
{namespace fsv=Sitegeist\FluidStyleguide\ViewHelpers}

<fc:component>
    <fc:param name="componentData" type="Sitegeist\FluidStyleguide\Domain\Model\Component" />
    <fc:param name="zipDownloadUri" type="string" />
    <fc:param name="iframeUri" type="string" />
    <fc:param name="activeFixture" type="string" />
    <fc:param name="qualityIssues" type="array" />
    <fc:param name="showDocumentation" type="bool" optional="1" default="1" />
    <fc:param name="showZipDownload" type="bool" optional="1" default="1" />
    <fc:param name="showEditor" type="bool" optional="1" default="1" />
    <fc:param name="showQualityIssues" type="bool" optional="1" default="0" />

    <fc:renderer>
        <div class="styleguideToolbar {class}" data-component="StyleguideToolbar">

            <div class="toolbarTop">
                <div class="toolbarOpener">
                </div>
            </div>

            <div class="toolbarBot">
                <div class="toolbarTabs">

                    <div class="tabNav">
                        <f:if condition="{componentData.arguments} || ({showDocumentation} && {componentData.documentation})">
                            <div class="tabOpener active">
                                DOCUMENTATION
                            </div>
                        </f:if>
                        <f:if condition="{showQualityIssues}">
                            <div class="tabOpener">
                                CODE QUALITY
                            </div>
                        </f:if>
                        <div class="tabOpener">
                            FLUID
                        </div>
                        <div class="tabOpener">
                            HTML
                        </div>
                        <f:if condition="{showZipDownload}">
                            <div class="tabOpener">
                                ZIP
                            </div>
                        </f:if>
                        <f:if condition="{showEditor} && {componentData.arguments -> f:count()} > 2">
                            <div class="tabOpener betaSign">
                                EDIT
                            </div>
                        </f:if>
                    </div>

                    <div class="tabContents">
                        <f:if condition="{componentData.arguments} || ({showDocumentation} && {componentData.documentation})">
                            <div class="tabContent active">
                                <h1>{componentData.name.displayName}</h1>
                                <f:if condition="{componentData.arguments}">
                                    <div class="boxMargin">
                                        <h2>API definition</h2>
                                        <div class="componentArguments">
                                            <table>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Type</th>
                                                    <th class="componentArgumentsRequired">Required</th>
                                                    <th>Default</th>
                                                    <th>Description</th>
                                                </tr>
                                                <f:for each="{componentData.arguments}" as="argument">
                                                    <f:if condition="{argument.name} != 'content'">
                                                        <tr>
                                                            <td class="componentArgumentsName">{argument.name}</td>
                                                            <td class="componentArgumentsType">{argument.type}</td>
                                                            <td class="componentArgumentsRequired">{f:if(condition: argument.required, then: '✔︎')}</td>
                                                            <td class="componentArgumentsDefault">
                                                                <f:if condition="!{argument.required}">
                                                                    <f:if condition="{argument.type} == 'boolean'">
                                                                        <f:then>
                                                                            {f:if(condition: argument.defaultValue, then: 'true', else: 'false')}
                                                                        </f:then>
                                                                        <f:else>
                                                                            {argument.defaultValue}
                                                                        </f:else>
                                                                    </f:if>
                                                                </f:if>
                                                            </td>
                                                            <td class="componentArgumentsDescription">{argument.description}</td>
                                                        </tr>
                                                    </f:if>
                                                </f:for>
                                            </table>
                                        </div>
                                    </div>
                                </f:if>

                                <f:if condition="{showDocumentation}">
                                    <div class="componentDocumentation">
                                        <fsv:format.markdown>{componentData.documentation}</fsv:format.markdown>
                                    </div>
                                </f:if>
                            </div>
                        </f:if>

                        <f:if condition="{showQualityIssues}">
                            <div class="tabContent">
                                <f:if condition="{qualityIssues -> f:count()} > 0">
                                    <f:then>
                                        <table class="qualityIssues">
                                            <tr>
                                                <th class="qualityIssueSeverity">Severity</th>
                                                <th>Issue</th>
                                            </tr>
                                            <f:for each="{qualityIssues}" as="issue">
                                                <tr class="qualityIssue qualityIssue--{issue.severity}">
                                                    <td class="qualityIssueSeverity"><span>{issue.severity}</span></td>
                                                    <td class="qualityIssueMessage">{issue.message}</td>
                                                </tr>
                                            </f:for>
                                        </table>
                                    </f:then>
                                    <f:else>
                                        Move along, everything is fine!
                                    </f:else>
                                </f:if>
                            </div>
                        </f:if>

                        <div class="tabContent">
                            <pre><f:format.htmlspecialchars><fsv:component.example component="{componentData}" fixtureName="{activeFixture}" /></f:format.htmlspecialchars></pre>
                        </div>

                        <div class="tabContent">
                            <f:format.htmlspecialchars>
                                <fsv:component.example
                                    component="{componentData}"
                                    fixtureName="{activeFixture}"
                                    execute="1"
                                    handleExceptions="1"
                                />
                            </f:format.htmlspecialchars>
                        </div>

                        <f:if condition="{showZipDownload}">
                            <div class="tabContent">
                                <a href="{zipDownloadUri}" class="downloadZip">
                                    <span>Download this component as ZIP archive</span>
                                </a>
                            </div>
                        </f:if>

                        <f:if condition="{showEditor} && {componentData.arguments -> f:count()} > 2">
                            <div class="tabContent">
                                <fsc:molecule.editFixtures iframeUri="{iframeUri}" activeFixture="{componentData.fixtures.{activeFixture}.data}" api="{componentData.arguments}" />
                            </div>
                        </f:if>
                    </div>
                </div>
            </div>
        </div>
    </fc:renderer>
</fc:component>