{{define "title"}}Edit Draft{{end}}

{{define "scripts"}}
<script src="/static/js/showdown.min.js"></script>
<script src="/static/js/add_edit.js"></script>
{{end}}

{{define "main"}}
<div class="container is-max-desktop">
  <form id="addEditForm" method="post" action="/blog/drafts/edit/{{.Post.ID}}">
    <input type='hidden' name='csrf_token' value='{{.CSRFToken}}'>
    <input type='hidden' name='asDraft' id='asDraft' value='false'>
    <div class="field">
      {{with .Form.FieldErrors.title}}
      <label class="has-text-danger">{{.}}</label>
      {{end}}
      <div class="control">
        <input class="input" type="text" name="title" id="title" placeholder="Title" value="{{.Form.Title}}">
      </div>
    </div>
    {{with .Form.FieldErrors.url}}
    <label class="has-text-danger">{{.}}</label>
    {{end}}
    <div class="field has-addons">
      <div class="control is-expanded">
        <input class="input" type="text" name="url" id="url" placeholder="URL" value="{{.Form.URL}}">
      </div>
      <div class="control">
        <button type="button" id="useTitleBtn" class="button is-info">Use Title</button>
      </div>
    </div>
    <div class="field">
      {{with .Form.FieldErrors.body}}
      <label class="has-text-danger">{{.}}</label>
      {{end}}
      <div class="control">
        <textarea class="textarea" name="body" id="bodybox" placeholder="Body" rows="26">{{.Form.Body}}</textarea>
      </div>
    </div>
    <div class="level">
      <div class="level-left">
        <div class="level-item">
          <div class="field is-grouped">
            <div class="control">
              <button type="submit" class="button is-link">Publish</button>
            </div>
            <div class="control">
              <button type="button" id="asDraftButton" class="button is-link is-light">Save</button>
            </div>
            <div class="control">
              <a href="/blog/drafts" class="button is-link is-light">Cancel</a>
            </div>
          </div>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item">
          <button type="button" class="button" id="insert-image">Insert Image</button>
        </div>
      </div>
    </div>
  </form>
  <div class="card mt-3">
    <div class="card-header">
      <p class="card-header-title">
        Preview
      </p>
    </div>
    <div class="card-content">
      <div class="content" id="preview">
      </div>
    </div>
  </div>
</div>
{{end}}