<header class="qui-control-package-header">
    <div class="qui-control-package-header-image">
        {{{image}}}
    </div>
    <div class="qui-control-package-header-text">
        <h1>{{title}}</h1>
        <div class="qui-control-package-header-text-description">
            {{description}}
        </div>
        {{#support.email}}
        <p class="qui-control-package-header-text-description">
            {{locale.support}}: {{support.email}}
        </p>
        {{/support.email}}
    </div>
</header>

<div class="qui-control-package-images">
    <h2>{{locale.preview}}</h2>
    <div class="qui-control-package-images-container">
        <ul>
            {{#data.preview}}
            <li>
                <img src="{{.}}"/>
            </li>
            {{/data.preview}}
            {{^data.preview}}
            <li>{{locale.noPreview}}</li>
            {{/data.preview}}
        </ul>
    </div>
</div>

<div class="qui-control-package-infos">
    <h2>{{locale.more}}</h2>
    <ul class="qui-control-package-infos-list">
        <li>
            <span class="qui-control-package-infos-title">{{locale.name}}:</span>
            <span class="qui-control-package-infos-value">{{data.name}}</span>
        </li>
        <li>
            <span class="qui-control-package-infos-title">{{locale.license}}:</span>
            <span class="qui-control-package-infos-value">
                {{#data.licence}}
                {{data.licence}}
                {{/data.licence}}
                {{^data.licence}}
                ---
                {{/data.licence}}
            </span>
        </li>
        <li>
            <span class="qui-control-package-infos-title">{{locale.version}}:</span>
            <span class="qui-control-package-infos-value">
                {{#data.version}}
                {{data.version}}
                {{/data.version}}
                {{^data.version}}
                ---
                {{/data.version}}
            </span>
        </li>
        <li>
            <span class="qui-control-package-infos-title">{{locale.type}}:</span>
            <span class="qui-control-package-infos-value">
                {{#data.type}}
                {{data.type}}
                {{/data.type}}
                {{^data.type}}
                ---
                {{/data.type}}
            </span>
        </li>
        <li>
            <span class="qui-control-package-infos-title">{{locale.hash}}:</span>
            <span class="qui-control-package-infos-value" {{#data.hash.full}}title="{{data.hash.full}}"{{/data.hash.full}}">
                {{#data.hash.short}}
                    {{data.hash.short}}...
                {{/data.hash.short}}
                {{^data.hash.short}}
                    ---
                {{/data.hash.short}}
            </span>
        </li>
    </ul>
</div>

<div class="qui-control-package-requirements">
    <h2>{{locale.dependencies}}</h2>
    <ul>
        {{#require}}
        <li>{{name}} ({{version}})</li>
        {{/require}}
        {{^require}}
        <li>---</li>
        {{/require}}
    </ul>
</div>