<div id="add-command-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      Add a Wurker Command
    </div>
    <div style="width:500; height:auto;">
      <form id="add-command-form" class="modal-form" data-droneid="">

        <div class="form-row">
          <label for="name">Name<span style="color:red;">*</span> </label>
          <input type="text" name="name" id="add-command-name" title="Name this Command"
                 placeholder="Required Command Name&#8230;" value="">
        </div>

        <div class="form-row">
          <label for="command">Command<span style="color:red;">*</span> </label>
          <input type="text" name="command" id="add-command-command" title="Command Path or Module"
                 placeholder="Path to Command, or Module Name&#8230;" value="">
        </div>

        <div class="form-row">
          <label for="description">Description </label>
          <input type="text" name="description" id="add-command-description" title="Describe this Command"
                 placeholder="Describe the Command&#8230;" value="">
        </div>

        <div class="form-row">
          <label for="ismodule">Is Module </label>
          <input type="checkbox" name="ismodule" id="add-command-ismodule" title="Is this Command a Python Module?"
                 disabled>
        </div>

      </form>
    </div>

    <div class="modal-footer">
      <div class="float-right">
        <button class="cancel">Cancel</button>
        <button class="submit">Add Command</button>
      </div>
    </div>

  </div>
</div>

<div id="edit-command-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      Edit Wurker Command
    </div>
    <div style="width:500; height:auto;">
      <form id="edit-command-form" class="modal-form" data-droneid="">

        <div class="form-row">
          <label for="edit-command">Edit<span style="color:red;">*</span> </label>
          <select name="edit-command" id="edit-command-selector" title="Select a Command to Edit">
            <option value="" disabled selected hidden>Choose Command to Edit&#8230;</option>
            {% for item in commandData %}
              <option value="{{ item['slug'] }}">
                {{ item['name'] }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-row">
          <label for="name">Name</label>
          <input type="text" name="name" id="edit-command-name" title="Name this Command"
                 placeholder="Required Command Name&#8230;" value="">
        </div>

        <div class="form-row">
          <label for="command">Command</label>
          <input type="text" name="command" id="edit-command-command" title="Command Path or Module"
                 placeholder="Path to Command, or Module Name&#8230;" value="">
        </div>

        <div class="form-row">
          <label for="description">Description</label>
          <input type="text" name="description" id="edit-command-description" title="Describe this Command"
                 placeholder="Describe the Command&#8230;" value="">
        </div>

        <div class="form-row">
          <label for="ismodule">Is Module </label>
          <input type="checkbox" name="ismodule" id="edit-command-ismodule" title="Is this Command a Python Module?">
        </div>

      </form>
    </div>

    <div class="modal-footer">
      <div class="float-right">
        <button class="cancel">Cancel</button>
        <button class="submit">Save</button>
      </div>
    </div>

  </div>
</div>

<div id="remove-command-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      Remove Wurker Command
    </div>
    <div style="width:500; height:auto;">
      <form id="remove-command-form" class="modal-form" data-droneid="">

        {% if not commandWidowed %}
          <p>No unattached Commands to remove.</p>
        {% else %}
          <p>Only unattached Commands may be removed.</p>
          <div class="form-row">
            <label for="remove-command">Remove<span style="color:red;">*</span> </label>
            <select name="remove-command" id="remove-command-selector" title="Select a Command to Remove">
              <option value="" disabled selected hidden>Choose Command to Remove&#8230;</option>
              {% for item in commandWidowed %}
                <option value="{{ item['slug'] }}">
                  {{ item['name'] }}
                </option>
              {% endfor %}
            </select>
          </div>
        {% endif %}

      </form>
    </div>

    <div class="modal-footer">
      <div class="float-right">
        <button class="cancel">Cancel</button>
        <button class="submit" {% if not commandWidowed %}style="display:none;"{% endif %}>
          Remove
        </button>
      </div>
    </div>

  </div>
</div>
