<details open class="rule-result--details" id="<%= hint.name %>" aria-expanded="true" role="group">
    <summary class="rule-title" title="<%= getMessage('showHintResultDetails', hint.name); %>" role="button"><%= hint.name %>: <%= hint.count %> <%= getMessage('hints'); %></summary>
    <div class="rule-content">
        <% if (hint.hasDoc) { %>
        <div class="rule-doc-buttons">
            <a class="rule-doc-button" rel="noopener noreferrer" target="_blank" href="https://webhint.io/docs/user-guide/hints/hint-<%= hint.name %>/#why-is-this-important"
                title="<%= hint.name %> - <%= getMessage('whyIsThisImportant'); %>">
                <%= getMessage('whyIsThisImportant'); %> <span class="rule-doc-icon"></span>
            </a>

            <a class="rule-doc-button" rel="noopener noreferrer" target="_blank" href="https://webhint.io/docs/user-guide/hints/hint-<%= hint.name %>/#examples-that-pass-the-hint"
                title="<%= hint.name %> - <%= getMessage('howToFixIt'); %>">
                <%= getMessage('howToFixIt'); %> <span class="rule-doc-icon"></span>
            </a>
        </div>
        <% } %>
        <% hint.problems.forEach(function (problem, index) { %>
            <div class="rule-result--details__body">
                <p id="hint-<%= hint.name %>-<%= index + 1 %>">
                    <span class="rule-result--details__hint-number"><%= getMessage('hintNumber', index + 1); %>:</span> <%= utils.linkify(problem.message); %> <a href="#hint-<%= hint.name %>-<%= index + 1 %>" class="hint-link" title="<%= hint.name %>: <%= getMessage('hintNumber', index + 1); %>"></a>
                </p>
                <% if (problem.resource) { %>
                <p>
                    <a class="rule-result--details__hint-link" target="_blank" rel="noopener noreferrer" href="<%= problem.resource %>">
                        <%= utils.cutUrlString(problem.resource); %>
                    </a>
                </p>
                <% } %>
                <% if (problem.sourceCode) { %>
                <div class="rule-result__code">
                    <code class="<%= problem.codeLanguage %>"><%= utils.cutCodeString(problem.sourceCode); %></code>
                </div>
                <% } %>
                <% if (problem.documentation) { %>
                <div class="rule-result__doc">
                    <h4><%= getMessage('furtherReading') %></h4>
                    <ul class="rule-result__doc--list">
                        <% problem.documentation.forEach(function (doc) { %>
                            <li><a href="<%= doc.link %>" target="_blank" rel="noopener noreferrer"><%= doc.text %></a></li>
                        <% }); %>
                    </ul>
                </div>
                <% } %>
            </div>
            <% if(hint.thirdPartyInfo) { %>
                <div class="rule-result--details__footer-msg">
                    <% if (hint.thirdPartyInfo.details) { %>
                        <p><%= getMessage('toLearnMore'); %> </p>
                    <% } else { %>
                        <p><%= getMessage('withTheHelpOf'); %> </p>
                    <% } %>

                    <a href="<%= hint.thirdPartyInfo.link %>">
                        <img src="<%= isScanner ? hint.thirdPartyInfo.logo.url : getDataUri(hint.thirdPartyInfo.logo.url) %>" alt="<%= hint.thirdPartyInfo.logo.alt %>" class="<%= hint.thirdPartyInfo.logo.name %>-logo">
                    </a>
                </div>
            <% } %>
        <% }); %>
    </div>
</details>
