{{-- POPUPS CODE START --}}
<p style="display: none">
    <button id="basic_popup" class="button" data-for="js_basic-popup">Show basic popup</button>
    <button id="img_required" class="button" data-for="img_req">Show images req</button>
    <button class="button button--warning" data-for="js_question-popup">Show question popup</button>
    <button id="success_popup" class="button button--success" data-for="js_success-popup">Show success popup</button>
    <button id="success_del_popup" class="button button--success" data-for="js_success-del-popup">Delete success popup</button>
    <button class="button button--error" data-for="js_error-popup">Show error popup</button>
    <button id="invalid_files" class="button" data-for="js_question-popup">invalid files</button>
    <button id="img_format" class="button" data-for="img-format">invalid</button>
    <button id=" file_size" class="button" data-for=" file-size">invalid files</button>

    <button id="nothing_to_update" class="button" data-for="nothing_to_upd">Nothing to Update</button>
    <button id="updated_popup" class="button button--success" data-for="js_updated-popup">Show updated popup</button>

  </p>

  <div class="popup popup--icon -success js_updated-popup" style="display: none">
  <div class="popup__background"></div>
  <div class="popup__content">
    <h3 class="popup__content__title">
      Saved
    </h1>
    <p>Data updated Successfully</p>
    <p>
      <button class="button button--success" data-for="js_success-popup" onclick="location.reload();">Done</button>
    </p>
  </div>
</div>

  <div class="popup nothing_to_upd">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title">
       Warning
      </h1>
      <p class="text-warning">Nothing to update !</p>
      <p>
        <button class="button" data-for="nothing_to_upd">Ok</button>
      </p>
    </div>
  </div>

  
  <div class="popup js_basic-popup">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title">
        Please Upload image
      </h1>
      <p class="text-danger">image upload required!</p>
      <p>
        <button class="button" data-for="js_basic-popup">Ok</button>
      </p>
    </div>
  </div>

  <div class="popup img_req">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title">
        Please Upload images
      </h1>
      <p class="text-danger">images upload required!</p>
      <p>
        <button class="button" data-for="js_basic-popup">Ok</button>
      </p>
    </div>
  </div>

  <div class="popup popup--icon -question js_question-popup">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title" style="color: #FC9806">
          NOTE: Read carefully
          </h3>
          <p> The image resolution must be '1080 x 720'</p>
           <p style="color: red">Invalid images are removed</p>
    <p>
        <button class="button button--warning" data-for="js_question-popup">OK</button>
      </p>
    </div>
  </div>

  <div class="popup popup--icon -question img-format">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title" style="color: #FC9806">
       NOTE: Read carefully
          </h3>
          <p> Only 'jpg & jpeg' format is supported</p>
              <p style="color: red">Invalid images are removed</p>
      <p>
        <button class="button button--warning" data-for="js_question-popup">OK</button>
      </p>
    </div>
  </div>

  <div class="popup popup--icon -question file-size">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title" style="color: #FC9806">
       NOTE: Read carefully
          </h3>
          <p> The file must be smaller than '700kb'</p>
              <p style="color: red">Invalid images are removed</p>
      <p>
        <button class="button button--warning" data-for="js_question-popup">OK</button>
      </p>
    </div>
  </div>

  <div class="popup popup--icon -success js_success-popup">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title">
        Successfully uploaded
      </h1>
      <p>Information uploaded Successfully</p>
      <p>
        <button class="button button--success" data-for="js_success-popup" onclick="location.reload();">Done</button>
      </p>
    </div>
  </div>

  <div class="popup popup--icon -success js_success-del-popup">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title">
        Successfully deleted
      </h1>
      <p>Selected data deleted Successfully</p>
      <p>
        <button class="button button--success" data-for="js_success-popup" onclick="location.reload();">Done</button>
      </p>
    </div>
  </div>

  <div id="error_popup" class="popup popup--icon -error js_error-popup">
    <div class="popup__background"></div>
    <div class="popup__content">
      <h3 class="popup__content__title">
        Please select images
      </h1>
      <p>!</p>
      <p>
        <button class="button button--error" data-for="js_error-popup">Hide Popup</button>
      </p>
    </div>
  </div>
  {{-- POPUPS CODE END --}}