<header class="modal-header">
    <h1 data-test-theme-warnings-title>
        {{#unless canActivate}}
            {{title}}
        {{else}}
            {{title}} with {{#if errors}}errors{{else}}warnings{{/if}}
        {{/unless}}
    </h1>
</header>
<a class="close" href="#" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>

<div class="modal-body">
    <ul class="theme-validation-errors" data-test-theme-warnings>
        {{#if message}}
            <li>
                <p data-test-theme-warnings-message>{{message}}</p>
            </li>
        {{/if}}
        {{#if fatalErrors}}
            <div class="theme-validation-errordescription">
                <h2 class="theme-validation-errortype fatal">Fatal Errors</h2>
                <p><em>(Must-fix to activate theme)</em></p>
            </div>
        {{/if}}
        {{#each fatalErrors as |error|}}
            <li class="theme-validation-item">
                {{gh-theme-error-li error=error}}
            </li>
        {{/each}}

        {{#if errors}}
            <div class="theme-validation-errordescription">
                <h2 class="theme-validation-errortype">Errors</h2>
                <p><em>(Very recommended to fix, functionality <span>could</span> be restricted)</em></p>
            </div>
        {{/if}}
        {{#each errors as |error|}}
            <li class="theme-validation-item">
                {{gh-theme-error-li error=error}}
            </li>
        {{/each}}

        {{#if warnings}}
            <div class="theme-validation-errordescription">
                <h2 class="theme-validation-errortype">Warnings</h2>
            </div>
        {{/if}}
        {{#each warnings as |error|}}
            <li class="theme-validation-item">
                {{gh-theme-error-li error=error}}
            </li>
        {{/each}}

    </ul>
</div>

<div class="modal-footer">
    <button {{action "closeModal"}} class="gh-btn" data-test-modal-close-button>
        <span>Close</span>
    </button>
</div>
