{{ define "document.gohtml" }}{{ template "base" . }}{{ end }}

{{ define "document_content" }}
<section class="workspace-shell workspace-shell--document">
  <div class="mobile-drawer-backdrop" data-mobile-drawer-backdrop aria-hidden="true"></div>
  {{ template "browser" .Browser }}
  <article class="document-shell" data-document-path="{{ .Path }}" data-document-hash="{{ .Hash }}" data-can-comment="{{ .CanComment }}">
    <div class="document-mobile-bar">
      <button class="document-mobile-bar__btn document-mobile-bar__btn--picker" type="button" data-toggle-picker aria-label="Open file picker" aria-expanded="false">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="18" x2="20" y2="18"></line></svg>
      </button>
      <span class="document-mobile-bar__title" aria-hidden="true">{{ .Title }}</span>
      <button class="document-mobile-bar__btn document-mobile-bar__btn--meta" type="button" data-toggle-meta aria-label="Open document info" aria-expanded="false">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
      </button>
    </div>
    <nav class="breadcrumbs" aria-label="Breadcrumb">
      <ol>
        {{ $lastIdx := sub (len .Breadcrumbs) 1 }}
        {{ range $i, $crumb := .Breadcrumbs }}
          <li>
            {{ if eq $i $lastIdx }}
              <span aria-current="page">{{ $crumb.Name }}</span>
            {{ else }}
              <a href="{{ $crumb.URL }}">{{ $crumb.Name }}</a>
            {{ end }}
          </li>
        {{ end }}
      </ol>
    </nav>
    <div class="document-meta" data-meta-drawer>
      <button class="mobile-drawer-close mobile-drawer-close--inside" type="button" data-close-meta aria-label="Close document info">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
      </button>
      <div class="document-meta__header">
        <h1>{{ .Title }}</h1>
        <details class="document-actions-dropdown">
          <summary aria-haspopup="true" aria-label="Document actions">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="5" r="1"></circle>
              <circle cx="12" cy="12" r="1"></circle>
              <circle cx="12" cy="19" r="1"></circle>
            </svg>
          </summary>
          <div class="document-actions-dropdown__menu">
            {{ if .CanWrite }}
              <a class="document-actions-dropdown__item" href="/docs/{{ trimMd .Path }}/edit">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
                <span>Edit</span>
              </a>
              {{ if .CanAdmin }}
                <a class="document-actions-dropdown__item" href="/permissions?resourceType=document&resourceId={{ .Path }}">
                  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                  <span>Permissions</span>
                </a>
              {{ end }}
              <button class="document-actions-dropdown__item document-actions-dropdown__item--danger" type="button" data-archive-path="{{ .Path }}" aria-label="Archive document">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
                <span>Archive</span>
              </button>
            {{ end }}
            <hr class="document-actions-dropdown__divider">
            <div class="document-actions-dropdown__meta">
              <div class="document-actions-dropdown__meta-row">
                <span class="document-actions-dropdown__meta-label">File</span>
                <code class="document-actions-dropdown__meta-value">{{ .Path }}</code>
              </div>
              <div class="document-actions-dropdown__meta-row">
                <span class="document-actions-dropdown__meta-label">Hash</span>
                <code class="document-actions-dropdown__meta-value">{{ .Hash }}</code>
              </div>
              {{ if .Tags }}
                <div class="document-actions-dropdown__meta-row">
                  <span class="document-actions-dropdown__meta-label">Tags</span>
                  <ul class="document-actions-dropdown__tag-list">
                    {{ range .Tags }}
                      <li><a href="/?tag={{ . }}">#{{ . }}</a></li>
                    {{ end }}
                  </ul>
                </div>
              {{ end }}
            </div>
          </div>
        </details>
      </div>
    </div>

    <div class="markdown-body">
      {{ .HTML }}
    </div>
  </article>
  <aside class="document-comments-aside" data-comments-aside aria-label="Comments">
    <div class="document-comments-strip" data-comments-strip>
      <button
        class="document-comments-strip__toggle"
        type="button"
        data-comment-toggle
        aria-pressed="false"
        aria-label="Toggle comments panel"
        title="Toggle comments"
      >
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15a2 2 0 0 1-2 2H8l-5 4V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"></path>
        </svg>
      </button>
      <div class="document-comments-strip__track" data-comments-strip-track></div>
    </div>
    <div class="document-comments-panel">
      <div class="document-comments-panel__list" data-comments-aside-list></div>
    </div>

    <!-- Mobile bottom sheet -->
    <div class="document-comments-sheet" data-comments-sheet>
      <div class="document-comments-sheet__handle">
        <button class="document-comments-sheet__toggle" type="button" data-toggle-comments aria-expanded="false" aria-label="Toggle comments">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H8l-5 4V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"></path>
          </svg>
          <span>Comments</span>
        </button>
        <button class="mobile-drawer-close mobile-drawer-close--inside" type="button" data-close-comments aria-label="Close comments">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <div class="document-comments-sheet__panel">
        <div class="document-comments-panel__list" data-comments-aside-list-mobile></div>
      </div>
    </div>
  </aside>
</section>
{{ end }}

{{ define "browser" }}
<nav class="miller-browser" aria-label="Documents" data-picker-drawer>
  <button class="mobile-drawer-close mobile-drawer-close--inside" type="button" data-close-picker aria-label="Close file picker">
    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
  </button>
  {{ range .Columns }}
    <section class="miller-column {{ if eq .Title "Content" }}miller-column--root{{ end }}" aria-label="{{ .Title }}">
      <h2 title="{{ .Title }}" {{ if $.CanWrite }}class="has-actions"{{ end }}>
        <span class="miller-column-title-wrap">
          {{ if eq .Title "Content" }}
            {{ template "icon-library" }}
          {{ end }}
          <span class="miller-column-title-text">{{ .Title }}</span>
        </span>
        {{ if $.CanWrite }}
          <span class="miller-column-actions">
            <button type="button" class="miller-column-new-file" data-folder-path="{{ .Path }}" aria-label="New file in {{ .Title }}">
              {{ template "icon-file-plus" }}
            </button>
            <button type="button" class="miller-column-add-folder" data-folder-path="{{ .Path }}" aria-label="Add folder to {{ .Title }}">
              {{ template "icon-folder-plus" }}
            </button>
          </span>
        {{ end }}
      </h2>
      <ul>
        {{ range .Items }}
          <li>
            <a class="{{ if .Active }}is-active{{ end }} {{ if .IsFolder }}is-folder{{ end }}" href="{{ .URL }}" title="{{ .Name }}">
              <span class="browser-item-label">
                {{ if .IsFolder }}{{ template "icon-folder" }}{{ else }}{{ template "icon-file-text" }}{{ end }}
                <span class="browser-item-name">{{ .Name }}</span>
              </span>
              {{ if .IsFolder }}{{ template "icon-chevron-right" }}{{ end }}
            </a>
          </li>
        {{ end }}
      </ul>
    </section>
  {{ end }}
</nav>
{{ end }}

{{ define "icon-folder" }}
<svg class="browser-icon browser-icon--folder" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
</svg>
{{ end }}

{{ define "icon-file-text" }}
<svg class="browser-icon browser-icon--page" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
  <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
  <path d="M10 9H8"></path>
  <path d="M16 13H8"></path>
  <path d="M16 17H8"></path>
</svg>
{{ end }}

{{ define "icon-library" }}
<svg class="browser-icon browser-icon--root" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
  <path d="m16 6 4 14"></path>
  <path d="M12 6v14"></path>
  <path d="M8 8v12"></path>
  <path d="M4 4v16"></path>
</svg>
{{ end }}

{{ define "icon-folder-plus" }}
<svg class="browser-icon browser-icon--folder" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
  <line x1="12" y1="11" x2="12" y2="17"></line>
  <line x1="9" y1="14" x2="15" y2="14"></line>
</svg>
{{ end }}

{{ define "icon-file-plus" }}
<svg class="browser-icon browser-icon--page" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
  <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
  <line x1="12" y1="11" x2="12" y2="17"></line>
  <line x1="9" y1="14" x2="15" y2="14"></line>
</svg>
{{ end }}

{{ define "icon-chevron-right" }}
<svg class="browser-item-chevron" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"></path>
</svg>
{{ end }}