<template>
    ---json
    {
        "templating": {
            "extends": "templates/layouts/content.html"
        }
    }
    ---
    [% template styles %]
    <style>
        :root {
            --pb-view-max-width: none;
        }
        main {
            padding-left: var(--s-1);
            padding-right: var(--s-1);
        }
    </style>
    [% endtemplate %]
    [% template breadcrumb %]
    <li>
        <pb-grid-action action="add" class="grid-add" grid="#grid">
            <button class="accent">
                <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288M400 256H112"/></svg>
                <span><pb-i18n key="document.add-panel">Add</pb-i18n></span>
            </button>
        </pb-grid-action>
    </li>
    [% endtemplate %]
    [% template after %]
    <!-- Metadata and transcription are always shown -->
    <pb-view src="document1" xpath="//teiHeader" view="single" class="metadata" subscribe="transcription" emit="transcription">
        <pb-param name="view" value="metadata"/>
    </pb-view>
    [% endtemplate %]
    <pb-grid id="grid" panels="[0]" subscribe="transcription" emit="transcription">
        <template>
            <!-- template used for adding a new column: user can choose between translation, facsimile and notes -->
            <pb-panel emit="transcription">
                <!-- Added to the toolbar -->
                <li slot="toolbar">
                    <pb-grid-action grid="#grid" action="remove">
                        <button class="light"><svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg></button>
                    </pb-grid-action>
                </li>
                <template title="Translation">
                    <pb-view src="document1" map="vg-translation" xpath="//div[@type='original']" subscribe="transcription"/>
                </template>
                <template title="Facsimile">
                    <pb-facsimile subscribe="transcription" type="image">
                    </pb-facsimile>
                    <div class="facscaption">Images hosted by <a href="http://vangoghletters.org">Van
                            Gogh Museum, Amsterdam, Huygens ING, The Hague</a></div>
                </template>
                <template title="Notes">
                    <pb-view src="document1" xpath="//div[@type='original']" subscribe="transcription">
                        <pb-param name="view" value="notes"/>
                    </pb-view>
                </template>
            </pb-panel>
        </template>
        <!-- For the transcription, users can choose between diplomatic and normalized view -->
        <pb-panel emit="transcription">
            <template title="Original text">
                <pb-view src="document1" class=".transcription" xpath="//div[@type='original']" subscribe="transcription" emit="transcription">
                    <pb-param name="view" value="normalized"/>
                </pb-view>
            </template>
            <template title="Original text + line endings">
                <pb-view src="document1" class=".transcription" xpath="//div[@type='original']" subscribe="transcription" emit="transcription"/>
            </template>
        </pb-panel>
    </pb-grid>
</template>