<% layout('layouts/boilerplate.ejs') %>

<div class="row m-5">
  <div class="col-6 offset-3">
    <div class="card shadow-lg">
      <div class="card-header">
        <div class="h1">New Hotel</div>
      </div>
      <div class="card-body">
        <form
          action="/hotel"
          method="post"
          class="validated-form"
          enctype="multipart/form-data"
          novalidate
        >
          <div class="mb-3">
            <label class="form-label h6" for="title">Title : </label>
            <input
              type="text"
              name="hotel[title]"
              id="title"
              class="form-control"
              placeholder="Enter hotel title"
              required
            />

            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-3">
            <label class="form-label h6" for="price">Price : </label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text px-4">â‚¹</span>
              </div>
              <input
                type="number"
                name="hotel[price]"
                id="price"
                class="form-control"
                placeholder="Enter hotel price"
                required
              />
            </div>

            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-3">
            <label class="form-label h6" for="description">Description : </label>
            <textarea
              name="hotel[description]"
              id="description"
              class="form-control"
              placeholder="Write few lines about hotel"
              required
            ></textarea>
            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-3">
            <label class="form-label h6" for="location">Location : </label>
            <input
              type="text"
              name="hotel[location]"
              id="location"
              class="form-control"
              placeholder="Enter hotel location"
              required
            />
            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-2">
            <label class="form-label h6" for="image">Image : </label>
            <div class="mt-1">
              <input
                class="form-control"
                type="file"
                name="image"
                id="image"
                multiple
              />
            </div>
            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-3">
            <button class="btn btn-primary mt-3 me-2 px-3">Add</button>
            <a href="/hotel" class="btn btn-danger mt-3 px-3">Back</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
