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

    <div class="sd-verification-box sd-font sd-drop-shadow">
        <div class="sd-header">
            <div>
                <span class="sd-title">{title}</span>
                <div class="sd-info">
                    <f:if condition="{count}">
                        <span>{count} Skills</span>
                    </f:if>
                    <a href="{detailUrl}" target="_blank">View on SkillDisplay</a>
                </div>
            </div>
            <f:if condition="{brandLogoUrl}">
                <div class="sd-brand">
                    <img src="{brandLogoUrl}" />
                </div>
            </f:if>
        </div>
        <p class="sd-description">{description -> f:format.html()}</p>
        <div class="sd-buttons">
            <a href="{verificationUrl}" target="_blank" class="sd-button sd-learner">
                <div class="sd-hint">
                    <f:image src="{f:uri.resource(extensionName: 'SkilldisplayContent', path: 'Images/default.svg')}" title="Not learned yet" alt="Indicates self assessment is not done yet" />
                </div>
                <div class="sd-type">Self Assessment</div>
            </a>
        </div>
    </div>

</html>