  <!-- Add Modal-->
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Download Image</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="catalog-tab" data-toggle="tab" href="#catalog" role="tab" aria-controls="catalog" aria-selected="true">Catalog</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="form-tab" data-toggle="tab" href="#form" role="tab" aria-controls="form" aria-selected="false">Form</a>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="catalog" role="tabpanel" aria-labelledby="catelog-tab">

              <div class="row mt-4">
                <label class="col-3 col-form-label text-right">Operating System: </label>
                <div class="col-7">
                  <div class="form-group">
                    <select id="operatingSystem" onchange="updateOSVersion()" class="form-control" name="operating_system">
                      <option value="">unavailable</option>
                    </select>
                  </div>
                </div>
                <div class="col-1">
                  <i class="far fa-sm fa-question-circle" title='Select the operating system.'></i>
                </div>
              </div>

              <div class="row">
                <label class="col-3 col-form-label text-right">OS Version: </label>
                <div class="col-7">
                  <div class="form-group">
                    <select id="operatingSystemVersion" onchange="" class="form-control" name="version">
                      <option value="">unavailable</option>
                    </select>
                  </div>
                </div>
                <div class="col-1">
                  <i class="far fa-sm fa-question-circle" title='Select the operating system version.'></i>
                </div>
              </div>

              <div class="row">
                <label class="col-3 col-form-label text-right">Image Variant: </label>
                <div class="col-7">
                  <div class="form-group">
                    <select id="operatingSystemVariant" onchange="" class="form-control" name="variant">
                      <option value="">unavailable</option>
                    </select>
                  </div>
                </div>
                <div class="col-1">
                  <i class="far fa-sm fa-question-circle" title='Select the image variant such as default or cloud. Default: default'></i>
                </div>
              </div>

              <div class="row">
                <label class="col-3 col-form-label text-right">Image Type: </label>
                <div class="col-7">
                  <div class="form-group">
                    <select id="operatingSystemType" onchange="" class="form-control" name="type">
                      <option value="container">container</option>
                      <option value="virtual-machine">virtual-machine</option>
                    </select>
                  </div>
                </div>
                <div class="col-1">
                  <i class="far fa-sm fa-question-circle" title='Select the type of image such as container of virtual-machine.'></i>
                </div>
              </div>

              <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="#" onclick="addCatalogImage()" data-dismiss="modal">Ok</a>
              </div>

            </div>
            <div class="tab-pane fade" id="form" role="tabpanel" aria-labelledby="form-tab">
              <form id="addForm">
                <div class="row mt-4">

                  <label class="col-2 col-form-label text-right">Image/Alias: <span class="text-danger">*</span></label>
                  <div class="col-8">
                    <div class="form-group">
                      <input type="text" class="form-control" required="required" placeholder="" name="image">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" data-toggle="tooltip" data-html="true" title='(Required) - Enter in the repository specific name. For example, ubuntu/20.04 would be used for the images repository and simply 20.04 would be used for the ubuntu repositories.'></i>
                  </div>
    
                  <label class="col-2 col-form-label text-right">Repository: </label>
                  <div class="col-8">
                    <div class="form-group">
                      <select id="selectRepoInput" class="form-control" name="simplestreams_id">
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select a repository from the configured simplestreams.'></i>
                  </div>
    
                  <label class="col-2 col-form-label text-right">Image Type:</label>
                  <div class="col-8 text-right">
                    <div class="form-group">
                      <select class="form-control" name="image_type">
                        <option value="container" selected>container</option>
                        <option value="virtual-machine">virtual-machine</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select whether to download a container based image or virtual machine. Default: container'></i>
                  </div>

                </div>
              </form>            
              <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="#" onclick="addItem()" data-dismiss="modal">Ok</a>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <!--<a href="#" data-toggle="modal" data-target="#trademarkNotices" title="Download Image" aria-hidden="true">Trademark notices</a>-->
        </div>
      </div>
    </div>
  </div>

  <!-- Edit Modal-->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit Image</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-4 col-form-label" id="imageNameEditInput"></label>
              <div class="col-12">
                <div class="form-group text-right">
                  <pre>
                    <textarea name="json" class="form-control" id="jsonInput" rows="16" ></textarea>
                  </pre>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="updateImage()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>
