{{ template "layout.html" . }}

{{ define "title" }}Edit entry: {{ .Title }}{{ end }}

{{ define "content" }}
<style>
  form {
    display: flex;
    flex-direction: column;
    /* max-width: 600px; */
    margin: 0 auto;
  }
  form input,
  form textarea {
    font-size: 1rem;
    width: calc(100% - 1rem);
  }
  form input[type="date"] {
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
  }
  form input[type="text"] {
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
  }
  form textarea {
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    resize: none;
    height: 24rem;
  }
</style>
<script>
  function editEntry(event) {
    event.preventDefault();
    document.getElementById('edit-entry').submit();
  }
</script>
<main class="container">
  <h1>Edit entry: {{ .Title }}</h1>
  <hr />
  <p>
    [<a href="/entry/{{ .ID }}">Back to entry</a>]
  </p>
  <hr />
  <form id="edit-entry" action="/entry/{{ .ID }}/edit" method="POST">
    <input type="text" name="title" placeholder="Title" value="{{ .Title }}" required>
    <input type="date" name="date" value="{{ .FormattedDate }}" required>
    <textarea name="content" placeholder="Content" rows="12" required>{{ .Content }}</textarea>
    <div>
      [<a href="#" onclick="editEntry(event)">Save</a>]
    </div>
  </form>
</main>
{{ end }}