{{!-- NAV --}}
<div class="nav">
    <img class="logo" src="/assets/images/logo.png" alt="Alex Heldt Logo">
    {{!-- SOCIALS --}}
    <div class="sub-nav">
        {{#each socials}}
        <a class="{{name}}" href="{{../protocol}}://{{../host}}/{{name}}" class="social">
            <svg data-color="#{{icon.hex}}" role="img" viewBox="0 0 24 24">
                <title>{{name}} Icon</title>
                <path d="{{icon.path}}"></path>
            </svg>
        </a>
        {{/each}}
    </div>
</div>

{{!-- MUSIC --}}
<div class="music">
    {{#each music}}
    <div class="song">
        <a href="{{../protocol}}://{{../host}}/{{id}}"><img src="{{image}}" alt="{{shown}} Cover Art"></a>
        <a href="{{../protocol}}://{{../host}}/{{id}}" class="title">
            {{shown}}
        </a>
    </div>
    {{/each}}
</div>



<div class="bar top"></div>
<div class="bar bottom">made by&nbsp; <a href="{{creator.website}}">{{creator.name}}</a></div>