  <div class="zettel">
    {% if page %}
    <div class="file-header">
      <div class="row align-items-center">
        <div class="col-8">
          {% if page.meta.is_zettel %}
            <div class="row align-items-center">
              <span>
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/>
                  <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"/>
                  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                </svg>
                <strong><span data-tooltip="Copy link to zettel" data-copy-value="{{page.canonical_url}}">{{page.meta['zettel'].id}}</span></strong>
                {% if page.meta.validation_issues %}
                  <span class="validation-badge" data-tooltip="{{ page.meta.validation_issues|length }} validation issue{{ 's' if page.meta.validation_issues|length != 1 else '' }}">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                  </span>
                {% endif %}
              </span>
            </div>
            <div class="row align-items-center">
              <span>
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-tags" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"/>
                  <path fill-rule="evenodd" d="M5.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
                  <path d="M1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z"/>
                </svg>
                {% for tag in page.meta.tags %}<a href="{{ 'tags.html'|url }}#{{tag}}">#{{tag}}</a> {% endfor %}
              </span>
            </div>
          {% endif %}
        </div>
        <div class="col-4 text-right date">
          {% if page.meta.editor %}
            <button id="zettel-edit-btn" class="btn btn-sm btn-outline-secondary editor-btn" data-tooltip="Edit zettel's source">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
              </svg>
            </button>
            <button id="zettel-save-btn" class="btn btn-sm btn-outline-success editor-btn" style="display:none" data-tooltip="Save to GitHub">
              <i class="fa fa-check"></i>
            </button>
            <button id="zettel-cancel-btn" class="btn btn-sm btn-outline-danger editor-btn" style="display:none" data-tooltip="Cancel editing">
              <i class="fa fa-times"></i>
            </button>
            <button id="zettel-forget-token-btn" class="btn btn-sm btn-outline-secondary editor-btn" style="display:none" data-tooltip="Forget stored token">
              <i class="fa fa-sign-out"></i>
            </button>
          {% elif page and page.edit_url %}
            <a href="{{ page.edit_url }}" class="hidden-hyperlink" data-tooltip="Edit zettel's source">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil clickable" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
              </svg>
            </a>
          {% endif %}
          {% if page.meta.is_zettel %}
            {{page.meta.zettel.last_update_date}}
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
    <div class="file-body">
      {{page.content}}
    </div>
    {% if config.extra.graph_enabled is defined and config.extra.graph_enabled and page.meta.is_zettel %}
    <div class="local-graph-heading">{% trans %}Connections{% endtrans %}</div>
    <div id="local-graph-container" data-graph-url="{{ 'graph.json'|url }}" data-zettel-id="{{ page.meta.zettel.id }}"></div>
    {% endif %}
    {% if page.meta.editor %}
    <div id="zettel-editor" style="display:none; padding: 1em;">
      <textarea id="zettel-editor-textarea"></textarea>
    </div>
    <script>window.__zettelkasten_editor={repo:"{{page.meta.editor.repo}}",branch:"{{page.meta.editor.branch}}",docsPrefix:"{{page.meta.editor.docs_prefix}}",srcPath:"{{page.file.src_path}}",editUrl:"{{page.edit_url or ''}}"};</script>
    <dialog id="zettel-token-dialog">
      <div class="modal-header">
        <h4 class="modal-title">GitHub Access Token</h4>
        <button type="button" class="modal-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <p class="token-warning"><i class="fa fa-lock"></i> Token is stored in your browser session only and cleared when you close the tab.</p>
        <div class="form-group">
          <label for="zettel-token-input">Personal access token</label>
          <input type="password" id="zettel-token-input" class="form-control" placeholder="ghp_...">
        </div>
        <p class="token-help">
          <a href="https://github.com/settings/tokens/new?scopes=repo&amp;description=mkdocs-zettelkasten" target="_blank" rel="noopener">Create a token</a> with <code>repo</code> or <code>contents:write</code> scope.
        </p>
      </div>
      <div class="modal-footer">
        <button id="zettel-token-submit" class="btn btn-sm btn-primary">Continue</button>
      </div>
    </dialog>
    {% endif %}
    {% if page and not page.is_homepage and (page.meta.ref or (page.meta.is_zettel and page.meta.zettel.backlinks)) %}
      <div class="file-references">
      {% if page.meta.ref %}
        <h6><i class="{{ page.meta.icons.references }}" aria-hidden="true"></i><span class="visually-hidden">References</span></h6>
        {{page.meta.ref}}
      {% endif %}
      {% if page.meta.is_zettel and page.meta.zettel.backlinks %}
        <h6><i class="{{ page.meta.icons.backlinks }}" aria-hidden="true"></i><span class="visually-hidden">Backlinks</span></h6>
        <ul>
          {% for link in page.meta.zettel.backlinks %}
            <li><a href="{{link.url|url}}">{{link.title}}</a></li>
          {% endfor %}
        </ul>
      {% endif %}
      </div>
    {% endif %}
  </div>
