{{define "title"}}{{if .NewPost}}New Post{{else}}{{if .Post.IsDraft}}Edit Draft{{else}}Edit Post{{end}}{{end}}{{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="{{if .NewPost}}/blog/new{{else}}/blog/edit/{{.Post.ID}}{{end}}">
    <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>
    {{with .Form.FieldErrors.tags}}
    <label class="has-text-danger">{{.}}</label>
    {{end}}
    <div class="field has-addons">
      <div class="control">
        <input type="text" class="input" id="tagBox" list="taglist">
        <datalist id="taglist">
          {{range .Tags}}
          <option value="{{.Name}}"></option>
          {{end}}
        </datalist>
      </div>
      <div class="control">
        <button id="addTagBtn" type="button" class="button is-info">Add Tag</button>
      </div>
    </div>
    <div class="field is-grouped is-grouped-multiline" id="tagZone">
      {{range.Form.Tags}}
      <div class="control">
        <div class="tags has-addons">
          <span class="tag {{.Color}}">{{.Name}}</span>
          <button class="tag is-delete" type="button"></button>
        </div>
      </div>
      {{end}}
    </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>
    {{with .Form.FieldErrors.headerImage}}
    <label class="has-text-danger">{{.}}</label>
    {{end}}
    <div class="field has-addons">
      <div class="control is-expanded">
        <input class="input" type="text" name="HeaderImageLocation" id="headerImgBox" placeholder="Header Image"
          value="{{.Form.HeaderImageLocation}}">
      </div>
      <div class="control">
        <button type="button" id="chooseHeaderImage" class="button is-info">Choose Header Image</button>
      </div>
    </div>
    <div class="field">
      {{with .Form.FieldErrors.description}}
      <label class="has-text-danger">{{.}}</label>
      {{end}}
      <div class="control">
        <textarea class="textarea" name="Description" placeholder="Description">{{.Form.Description}}</textarea>
      </div>
    </div>
    <div class="level">
      <div class="level-left">
        <div class="level-item">
          <div class="field is-grouped">
            <div class="control">
              <button type="button" id="submitBtn" class="button is-success is-soft">{{if
                .Post.IsDraft}}Publish{{else}}Submit{{end}}</button>
            </div>
            <div class="control">
              <button type="button" id="asDraftButton" class="button is-info is-soft">{{if
                .Post.IsDraft}}Save{{else}}{{if .NewPost}}Save As Draft{{else}}Unpublish{{end}}{{end}}</button>
            </div>
            <div class="control">
              <a href="/blog{{if .Post.IsDraft}}/drafts{{end}}" class="button is-info is-soft">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}}