<a href="" class="theme-validation-toggle-details" {{action "toggleDetails"}} data-test-toggle-details>
    <div class="theme-validation-type-label"></div>
    <div class="flex items-center flex-auto">
        <h4 class="theme-validation-rule-text">
            {{{this.error.rule}}}
        </h4>
        <div class="theme-validation-rule-icon">
            {{#if this.showDetails}}
                {{svg-jar "arrow-down"}}
            {{else}}
                {{svg-jar "arrow-right"}}
            {{/if}}
        </div>
    </div>
</a>

{{#if this.showDetails}}
    <p class="theme-validation-details">
        {{{this.error.details}}}
    </p>
    {{#if this.error.failures}}
        <div class="theme-validation-list">
            <h6>Affected files:</h6>
            <ul>
                {{#each this.error.failures as |failure|}}
                    <li><code>{{failure.ref}}</code>{{#if failure.message}}: {{failure.message}}{{/if}}</li>
                {{/each}}
            </ul>
        </div>
    {{/if}}
{{/if}}
