{{ template "layout.html" . }}

{{ define "title" }}New entry{{ 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;
  }
  /* form button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background-color: #000;
    color: white;
    cursor: pointer;
    width: 100%;
  }
  form button:hover {
    background-color: #333;
  } */
</style>
<script>
  function saveEntry(event) {
    event.preventDefault();
    document.getElementById('new-entry').submit();
  }
  function clearForm(event) {
    event.preventDefault();
    document.getElementById('new-entry').reset();
  }
</script>
<main class="container">
  <h1>New entry</h1>
  <hr />
  <form id="new-entry" action="/entry/new" method="POST">
    <input type="text" name="title" placeholder="Title" required>
    <input type="date" name="date" value="{{ .Today }}" required>
    <textarea name="content" placeholder="Content" rows="12" required></textarea>
    <div>
      [<a href="#" onclick="saveEntry(event)">Save</a>]&nbsp;[<a href="#" onclick="clearForm(event)">Clear</a>]
    </div>
  </form>
</main>
{{ end }}