{% import "macros" as m %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Rocket Form Example</title>
    <link rel="stylesheet" href="/chota.min.css">
    <style>
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px 10px;
      }

      h1 {
          margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Form Example</h1>

      {% if errors | length > 0 %}
          <div class="row">
            <div class="col">
              <small class="text-error">
                error: {{ errors | length }} field{{ errors | length | pluralize }}
                failed to validate
              </small>
            </div>
          </div>
      {% endif %}

      <form action="/" method="post" enctype="multipart/form-data">
        <fieldset>
          <legend>About You</legend>
          <div class="row">
            <div class="col">
                {{ m::input(label="Name", type="text", name="account.name") }}
                <!-- required -->
            </div>
            <div class="col">
            {{ m::input(label="Email Address", type="text", name="account.email") }}
              <!-- required pattern=".*@.*"/> -->
            </div>
          </div>

          <div class="row">
            <div class="col">
              {{ m::input(label="Password", type="password", name="account.password.first") }}
              <!--   required minlength="6" value="" /> -->
            </div>

            <div class="col">

            {{
                m::input(label="Confirm Password",
                type="password",
                name="account.password.second")
            }}

              <!--   required minlength="6" value="" /> -->
            </div>
          </div>
        </fieldset>

        <fieldset>
          <legend>Metadata</legend>

          <div class="row">
            <div class="col">
            {{ m::input(label="Title", type="text", name="submission.title") }}
              <!-- required -->
            </div>
          </div>

          <div class="row">
            <div class="col">
            {{ m::input(label="Publish Date", type="date", name="submission.date") }}
              <!-- <input type="date" name="submission.date" id="date" value="2020&#45;12&#45;26"> -->
            </div>

            <div class="col">
            {{
                m::select(
                    label="Rights Assignment",
                    name="submission.rights",
                    options=["Public", "Reserved", "Exclusive"]
                )
            }}
            </div>
          </div>

          <div class="row">
            <div class="col">
              <label>Applicable Categories</label>
              <br />
              {{ m::checkbox(name="submission.category", label="Biology", value="Biology") }}
              <br />
              {{ m::checkbox(name="submission.category", label="Chemistry", value="Chemistry") }}
              <br />
              {{ m::checkbox(name="submission.category", label="Physics", value="Physics") }}
              <br />
              {{ m::checkbox(name="submission.category", label="CS", value="CS") }}
            </div>
          </div>

        </fieldset>

        <fieldset>
          <legend>Contents</legend>

            {{
                m::textarea(
                    label="Abstract",
                    name="submission.abstract",
                    placeholder="Your abstract, max 250 characters...",
                    max=250
                )
            }}

          {{
              m::input(
                  label="File to Upload (PDF, max 1MiB)",
                  type="file",
                  name="submission.file"
              )
          }}

          <!-- <input type="file" name="submission.file" id="file" required accept=".pdf"> -->

          <div class="row">
            <div class="col">
                {{ m::checkbox(name="submission.ready", label="Submission is ready for review.") }}
            </div>
          </div>

        </fieldset>

        <br />
        <input type="submit" value="Submit" class="is-full-width" />
      </form>
    </div>
  </body>
</html>
