{#include layout}
{#title}{path} at {ref} – {repo.name}{/title}
<div class="repo-layout">
    {#include RepositoryResource/sidebar nav=nav active='code' /}
    <section class="repo-main">
        <nav class="breadcrumb" aria-label="Path">
            {#for crumb in crumbs}
            {#if crumb.href}<a href="{crumb.href}">{crumb.label}</a>{#else}<span class="current">{crumb.label}</span>{/if}
            {#if crumb_hasNext}<span class="sep">/</span>{/if}
            {/for}
        </nav>
        {#if binary}
        <p>Binary file. <a class="btn btn-secondary" href="/repos/{repo.ownerHandle}/{repo.name}/raw/{ref}/{path}">Download</a></p>
        {#else if markdownHtml}
        <div class="md-toggle" role="group" aria-label="View mode">
            <button type="button" class="btn btn-secondary btn-sm active" data-md-view="rendered">Rendered</button>
            <button type="button" class="btn btn-secondary btn-sm" data-md-view="code">Code</button>
        </div>
        <div class="readme-body" data-md-pane="rendered">{markdownHtml.raw}</div>
        <pre hidden data-md-pane="code"><code class="language-{language}">{content}</code></pre>
        {#else if language}
        <pre><code class="language-{language}">{content}</code></pre>
        {#else}
        <pre>{content}</pre>
        {/if}
    </section>
</div>
{#scripts}
{#if language}
<script src="/highlight.min.js"></script>
<script src="/highlight-extra.min.js"></script>
<script>hljs.highlightAll();</script>
{/if}
{#if markdownHtml}
<script>
document.querySelectorAll('[data-md-view]').forEach(function (button) {
    button.addEventListener('click', function () {
        document.querySelectorAll('[data-md-view]').forEach(function (b) {
            b.classList.toggle('active', b === button);
        });
        document.querySelectorAll('[data-md-pane]').forEach(function (pane) {
            pane.hidden = pane.dataset.mdPane !== button.dataset.mdView;
        });
    });
});
</script>
{/if}
{/scripts}
{/include}