AstralRinth/templates/search-results.hbs

{{#each results}}
    <div class="result gray-border rounded-border">
        <img src="{{this.icon_url}}" width="75px" height="75px" class="result-image"/>
        <div class="result-info">
            <div class="result-title">
                <a class="result-name" href="{{this.page_url}}"><h2>{{this.title}}</h2></a><!--
                --><span class="muted result-author-container">by <a class="result-author" href="{{this.author_url}}">{{this.author}}</a></span>
            </div>
            <p>{{this.description}}</p>
            <div class="mod-info">
                <span class="mod-downloads" title="Downloads">
                    <svg><use xlink:href="/static/images/icon/spritesheet.svg#download"/></svg><!--
                    -->{{format this.downloads}}
                </span>

                <span class="mod-created" title="Created">
                    <svg><use xlink:href="/static/images/icon/spritesheet.svg#created"/></svg><!--
                    -->{{this.date_created}}
                </span>

                <span class="mod-updated" title="Last Updated">
                    <svg><use xlink:href="/static/images/icon/spritesheet.svg#updated"/></svg><!--
                    -->{{this.date_modified}}
                </span>

                <span class="mod-version" title="Version">
                    <svg><use xlink:href="/static/images/icon/spritesheet.svg#version"/></svg><!--
                    -->{{this.latest_version}}
                </span>

                <div class="loader-icons">
                    {{#contains this.keywords "forge"}}
                        <div class="loader-forge" title="Forge">
                            <svg class="forge" viewbox="0 0 120 66.7"><use href="#forge" xlink:href="#forge"/></svg>
                        </div>
                    {{/contains}}
                    {{#contains this.keywords "fabric"}}
                        <div class="loader-fabric" title="Fabric">
                            <img alt="fabric" src="/static/images/icon/fabric.png"/>
                        </div>
                    {{/contains}}
                </div>
            </div>
        </div>
        <div class="result-badges">
            {{#contains this.keywords "technology"}}
                <div class="tech-badge result-badge" title="Tech">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#tech"/></svg>
                    <p>TECH</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "adventure"}}
                <div class="adventure-badge result-badge" title="Adventure">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#adventure"/></svg>
                    <p>ADVENTURE</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "magic"}}
                <div class="magic-badge result-badge" title="Magic">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#magic"/></svg>
                    <p>MAGIC</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "utility"}}
                <div class="utility-badge result-badge" title="Utility">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#util"/></svg>
                    <p>UTILITY</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "decoration"}}
                <div class="decoration-badge result-badge" title="Decoration">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#decoration"/></svg>
                    <p>DECORATION</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "library"}}
                <div class="library-badge result-badge" title="Library">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#library"/></svg>
                    <p>LIBRARY</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "worldgen"}}
                <div class="world-badge result-badge" title="Worldgen">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#world"/></svg>
                    <p>WORLDGEN</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "cursed"}}
                <div class="cursed-badge result-badge" title="Cursed">
                    <img alt="cursed" src="/static/images/icon/cursed.png" class="badge-image"/>
                    <p>CURSED</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "storage"}}
                <div class="storage-badge result-badge" title="Storage">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#storage"/></svg>
                    <p>STORAGE</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "food"}}
                <div class="food-badge result-badge" title="Food">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#food"/></svg>
                    <p>FOOD</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "equipment"}}
                <div class="equipment-badge result-badge" title="Equipment">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#equipment"/></svg>
                    <p>EQUIPMENT</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "misc"}}
                <div class="misc-badge result-badge" title="Misc">
                    <svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#misc"/></svg>
                    <p>MISC</p>
                </div>
            {{/contains}}
        </div>
    </div>
{{else}}
    <div class="search-error">
        {{#if ../query.q}}
        <h2>No results found for query <code>"{{../query.q}}"</code></h2>
        {{else}}
        <h2>No results found</h2>
        {{/if}}
    </div>
{{/each}}