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

{{ define "document_edit_content" }}
<section class="workspace-shell workspace-shell--document-edit">
  {{ template "browser" .Browser }}
  <article class="document-shell document-shell--editor" data-document-path="{{ .Path }}" data-document-hash="{{ .Hash }}">
    <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">
      <div class="document-meta__header document-meta__header--editor">
        <div>
          <p class="eyebrow">Editing</p>
          <h1>{{ .Title }}</h1>
        </div>
        <a class="document-edit-link" href="/docs/{{ trimMd .Path }}">Done</a>
      </div>
      <details class="document-meta-panel">
        <summary>
          <span>Editor details</span>
          <span class="editor-status" data-sync-status>Saved</span>
        </summary>
        <dl class="meta-grid">
          <div>
            <dt>File</dt>
            <dd><code>{{ .Path }}</code></dd>
          </div>
          <div>
            <dt>Hash</dt>
            <dd><code data-editor-hash>{{ .Hash }}</code></dd>
          </div>
          <div>
            <dt>Status</dt>
            <dd><span class="editor-status" data-sync-status-secondary>Saved</span></dd>
          </div>
        </dl>
      </details>
      <div class="editor-conflict" data-conflict-notice hidden>
        <div class="editor-conflict__header">
          <div>
            <strong>Conflict detected.</strong>
            <span>The server has a newer copy (<code data-conflict-hash></code>). Resolve it before saving more edits.</span>
          </div>
          <div class="editor-conflict__actions">
            <button type="button" data-conflict-apply disabled>Apply Resolution</button>
            <button type="button" data-conflict-dismiss>Dismiss</button>
          </div>
        </div>
        <p data-conflict-status>Red deletions are from the server copy. Green additions are from your queued edit.</p>
        <div class="editor-conflict__legend" aria-label="Diff color meaning">
          <span><span class="editor-conflict__swatch editor-conflict__swatch--server"></span>Red / - Server copy</span>
          <span><span class="editor-conflict__swatch editor-conflict__swatch--local"></span>Green / + Your edit</span>
        </div>
        <div class="editor-conflict__choices" role="group" aria-label="Resolution starting point">
          <button type="button" data-conflict-use="server">Use Server</button>
          <button type="button" data-conflict-use="local">Use My Edit</button>
          <button type="button" data-conflict-use="both">Use Both</button>
        </div>
        <div class="editor-conflict__diff" data-conflict-diff></div>
        <div class="editor-conflict__resolution">
          <label for="conflict-resolution">Resolved document</label>
          <div data-conflict-monaco-mount></div>
          <textarea id="conflict-resolution" data-conflict-resolution spellcheck="false"></textarea>
        </div>
      </div>
    </div>

    <form class="editor-form" data-editor-form data-document-path="{{ .Path }}">
      <label class="sr-only" for="document-editor">Markdown editor</label>
      <div data-monaco-mount></div>
      <textarea id="document-editor" name="content" data-document-editor spellcheck="false">{{ .Source }}</textarea>
    </form>
  </article>
</section>
{{ end }}