<div class="row">
  <div class="col-md-12 mt-2">
    <form
      name=""
      id="blogForm"
      method="post"
      action="/manage-blogs/insert-blogs"
      enctype="multipart/form-data"
      novalidate
    >
      <div class="card card-info">
        <div class="card-header">
          <h4 class="card-title"><%=sectionTitle%></h4>
        </div>
        <div class="card-body">
          <div class="form-row">
            <div class="form-group col-md-6">
              <label class="required" for="inputName">Titel</label>
              <input
                type="text"
                id="title"
                name="title"
                class="form-control"
                placeholder="Enter title"
                required
                oninput="capitalizeFirstLetter(this)"
                oninput="validate(this)"
              />
            </div>

            <div class="form-group col-md-6">
              <label class="required" for="inputName">Kategorie </label>
              <select
                id="category_id"
                name="category_id"
                class="form-control"
                required
              >
                <option selected disabled>Wählen</option>
                <% if (categories && categories.length) { %> <% for (let item of
                categories) { %>
                <option value="<%= item.id %>"><%= item.title %></option>
                <% } %> <% } else { %>
                <option disabled>No categories available</option>
                <% } %>
              </select>
            </div>

            <div class="form-group col-md-6">
              <label for="inputName">Bild </label>
              <input
                type="file"
                class="form-control imagepickerWithPreviewId"
                data-previewelement="imagePreview"
                id="image"
                name="image"
                accept="image/*"
                onchange="return fileValidation()"
                style="padding: 4px 4px;"
              />
              <label
                id="image-error"
                style="display: none"
                class="error"
                for="image"
                >Please upload file having extensions .jpeg/.jpg/.png/.gif
                only.</label
              >

            
            </div>
            <div class="form-group col-md-6" id="previewSingleImage">
              <img class="img-thumbnail" id="imagePreview" style="width: 100px" src="" alt="">
          </div>
            <div class="form-group col-md-12">
              <label class="required" for="inputName">Summary</label>
              <textarea
                type="text"
                id="summary"
                data-lang="en"
                name="summary"
                class="form-control summary"
                placeholder="Enter Seiteninhalt"
                required
              ></textarea>
            </div>

            <div class="form-group col-md-12">
              <label class="" for="inputName">Inhalt </label>
              <textarea
                type="text"
                id="inhalteditor"
                data-oc-toggle="ckeditor"
                data-lang="en"
                name="content"
                class="form-control editor"
                placeholder="Enter Seiteninhalt"
                ></textarea>

              <!-- <div id="editor-error" style="color: red;font-weight: 700; display: none;">Please provide the Seiteninhalt.</div> -->

            </div>

            <div class="form-group col-md-6">
              <label class="required" for="inputName">Video</label>
              <input
                type="file"
                class="form-control imagepickerWithPreviewId"
                data-previewelement="videoPreview"
                id="video"
                name="video"
                accept="video/*"
                required
                onchange="return fileValidation()"
                style="padding: 4px 4px;"
              />
              <video
                id="videoPreview"
                width="320"
                height="240"
                controls
                style="display: none"
              >
                Your browser does not support the video tag.
              </video>
            </div>




            <div class="form-group col-md-6">
              <label class="required" for="inputName">Video-Miniaturansicht</label>
              <input
                type="file"
                class="form-control imagepickerWithPreviewId3"
                data-previewelement="imagePreview3"
                id="image"
                name="video_thumbnail"
                required
                accept="image/*"
                onchange="return fileValidation()"
                style="padding: 4px 4px;"
              />
              <label
                id="image-error"
                style="display: none"
                class="error"
                for="image"
                >Please upload file having extensions .jpeg/.jpg/.png/.gif
                only.</label
              >
              <div class="form-group col-md-6 mt-3" id="previewSingleImage3">
                  <img
                    class="img-thumbnail"
                    id="imagePreview3"
                    style="width: 100px"
                    src=""
                    alt=""
                  />
                </div>
            </div>

            <div class="form-group col-md-6">
              <label class="required" for="inputName">PDF</label>
              <input
                type="file"
                class="form-control imagepickerWithPreviewId"
                id="pdf"
                name="pdf"
                accept="application/pdf"
                
                onchange="return fileValidation()"
                style="padding: 4px 4px;"
              />
            </div>

 


            <div class="form-group col-md-6">
              <label class="required" for="inputName">Status </label>
              <select
                id="active_status"
                name="active_status"
                class="form-control"
                required
              >
                <option selected disabled>Select Status</option>
                <option value="1" selected>Aktiv</option>
                <option value="0">Inaktiv</option>
              </select>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <button type="submit" id="savebtn" class="btn btn-info">
            Speichern
          </button>
          <button type="button" class="btn btn-default">
            <a href="/manage-blogs/listing">Zurück</a>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>


<%- contentFor('pageStyleSection')%>
<link rel="stylesheet" href="/stylesheets/style.css" />
