<%- include('../../common/header') %>
<%- include('../../common/side-bar') %>

<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
  <%- include('../../common/navbar') %>
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-xl-3 col-sm-3 mb-xl-0 mb-4">
      </div>
      <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
          <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
            <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
              <h6 class="text-white text-capitalize ps-3">Add New Blog</h6>
            </div>
          </div>
          <div class="card-body px-3 pb-2">
            <form role="form" action="/blogs/store" method="post" enctype="multipart/form-data">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <div class="input-group input-group-outline mb-3">
                <label class="form-label">Title</label>
                <input type="text" class="form-control" name="name" >
              </div>
              <div class="input-group input-group-outline mb-3">
                <!-- <label class="form-label">Category</label> -->
                <select class="form-control" name="category_id" >
                  <option selected="selected" disabled>-- Select Category --</option>
                  <% categories.forEach((element,key) => { %>
                  <option value="<%=element._id%>"><%=element.name%></option>
                  <%});%>
                </select>
              </div>

              <div class="input-group input-group-outline mb-3">
                <!-- <label class="form-label">Author</label> -->
                <select class="form-control" name="author_id" >
                  <option selected="selected" disabled>-- Select Author --</option>
                  <% authors.forEach((element,key) => { %>
                  <option value="<%=element._id%>"><%=element.name%></option>
                  <%});%>
                </select>
              </div>

              <div class="input-group input-group-outline mb-3">
                <label class="form-label">Tag 1</label>
                <select class="form-control" name="tag1">
                  <option selected="selected" disabled>-- Select Tag 1 --</option>
                  <% tags.forEach((element,key) => { %>
                  <option value="<%=element._id%>"><%=element.name%></option>
                  <%});%>
                </select>
              </div>

              <div class="input-group input-group-outline mb-3">
                <label class="form-label">Tag 2</label>
                <select class="form-control" name="tag2">
                  <option selected="selected" disabled>-- Select Tag 2 --</option>
                  <% tags.forEach((element,key) => { %>
                  <option value="<%=element._id%>"><%=element.name%></option>
                  <%});%>
                </select>
              </div>

              <div class="input-group input-group-outline mb-3">
                <label class="form-label">Tag 3</label>
                <select class="form-control" name="tag3">
                  <option selected="selected" disabled>-- Select Tag 3 --</option>
                  <% tags.forEach((element,key) => { %>
                  <option value="<%=element._id%>"><%=element.name%></option>
                  <%});%>
                </select>
              </div>

              <div class="input-group input-group-outline mb-3">
                <label class="form-label">Tag 4</label>
                <select class="form-control" name="tag4">
                  <option selected="selected" disabled>-- Select Tag 4 --</option>
                  <% tags.forEach((element,key) => { %>
                  <option value="<%=element._id%>"><%=element.name%></option>
                  <%});%>
                </select>
              </div>

              <div class="input-group input-group-outline mb-3">
                <label class="form-label">Tag 5</label>
                <select class="form-control" name="tag5">
                  <option selected="selected" disabled>-- Select Tag 5 --</option>
                  <% tags.forEach((element,key) => { %>
                  <option value="<%=element._id%>"><%=element.name%></option>
                  <%});%>
                </select>
              </div>

              <!-- <input type="checkbox" value="1000" name="checkname">
              <input type="checkbox" value="2000" name="checkname">
              <input type="checkbox" value="3000" name="checkname">
              <input type="checkbox" value="4000" name="checkname"> -->


              <div class="input-group input-group-outline mb-3">
                <label class="form-label">Description</label>
                <textarea name="description" class="form-control" id="editor"></textarea>
                <script>
                  ClassicEditor
                    .create(document.querySelector('#editor'))
                    .then(editor => {
                      console.log('CKEditor initialized');
                    })
                    .catch(error => {
                      console.error(error);
                    });
                </script>

              </div>
              <div class="input-group input-group-outline mb-3">
                <!-- <label class="form-label">Featured Image</label> -->
                <input type="file" class="form-control" name="image" required>
              </div>
              <div class="input-group input-group-outline mb-3">
                <input type="file" class="form-control" name="section_image">
              </div>
              <div class="input-group input-group-outline mb-3">
                <input type="file" class="form-control" name="section_image2" >
              </div>
              <div class="input-group input-group-outline mb-3">
                <input type="file" class="form-control" name="section_image3" >
              </div>
              <div class="text-center">
                <button type="submit" class="btn btn-lg bg-gradient-primary btn-lg mt-4 mb-0">Submit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>


<%- include('../../common/footer') %>