---
package com.jessebrault.site.composition

import com.jessebrault.site.StandardPage
import com.jessebrault.site.util.MaybeExternalLink
---
<StandardPage title={title}>
    <div class="article-container">
        <a id="back-to-compositions" href="/compositions">Back to compositions</a>
        <article>
            <section class="composition-info">
                <div class="composition-titles-year-container">
                    <div class="composition-titles">
                        <h1 class="title">$composition.title</h1>
                        <WhenNotNull item={composition.subTitle} render={<h2 class="sub-title">$it</h2>} />
                    </div>
                    <p class="year">$compositionYear</p>
                </div>
                <WhenNotNull item={composition.version} render={<p class="version">$it</p>} />
                <p class="instrumentation">$composition.instrumentation</p>
                <WhenNotNull item={composition.premiere} render={<p class="premiere">Premiere: $it</p>} />
                <WhenNotEmpty items={composition.recordings.entrySet()}>
                    <div class="recordings">
                        <span>Recordings:</span>
                        <ul>
                            <Each
                                items={composition.recordings.entrySet()}
                                transform={<li><MaybeExternalLink href={it.value}>$it.key</MaybeExternalLink></li>}
                            />
                        </ul>
                    </div>
                </WhenNotEmpty>
                <WhenNotEmpty items={composition.externalLinks.entrySet()}>
                    <div class="external-links">
                        <span>External links:</span>
                        <ul>
                            <Each
                                items={composition.externalLinks.entrySet()}
                                transform={<li><MaybeExternalLink href={it.value}>$it.key</MaybeExternalLink></li>}
                            />
                        </ul>
                    </div>
                </WhenNotEmpty>
                <WhenNotEmpty items={alternateVersions}>
                    <div class="alternate-versions">
                        <span>Alternate versions:</span>
                        <ul>
                            <Each
                                items={alternateVersions}
                                transform={<li><a href={it.path}>${it.versionName}</a></li>}
                            />
                        </ul>
                    </div>
                </WhenNotEmpty>
            </section>
            <section class="composition-text">
                ${composition.text.render()}
            </section>
        </article>
    </div>
</StandardPage>