<div id="backupmodal" class="modal">
  <div class="modal-content">
    <h4>New Backup</h4>
    <p style="margin-bottom: 0;">
      Create a new backup immediately, using the settings you've configured for the automatic backups
      (eg full/partial, password, etc).
    </p>
    <form>
      <div class="row" style="margin-bottom: 12px;">
        <div class="input-field col s12">
          <i class="material-icons prefix">label_outline</i>
          <input type="text" id="backup_name_one_off" name="backup_name_one_off" class="validate"
            onkeyup="backupNameOneOffExample()" />
          <label for="backup_name_one_off">Backup Name</label>
          <span class="helper-text">
            The name to use for this backup, or leave it blank to use the default
            naming scheme. It can't be changed later.  Optionally you can use template variables.
            <a target="_blank" rel="noreferrer"
              href="https://github.com/sabeechen/hassio-google-drive-backup#can-i-give-backups-a-different-name">
              See here
            </a>
            for a list of all available options.
            <div style="margin-top: 10px;">
              Your backup's name will look something like:
              <br />
              <b id="backup_name_example_one_off"></b>
            </div>
          </span>
        </div>
        <div class="input-field col s12">
          <i class="material-icons prefix">comment</i>
          <input type="text" id="backup_note_one_off" name="backup_note_one_off" />
          <label for="backup_note_one_off">Comment</label>
          <span class="helper-text">
            Add a comment that appears alongside the backup in this web UI and in Google Drive.  You can change this later.
          </span>
        </div>
      </div>
      <div class="row" style="margin-left: 8px; margin-bottom: 0;">
        <div class="col s12">
          <label>
            <input type="checkbox" name="retain_drive_one_off" id="retain_drive_one_off" class="filled-in checkbox-ha" />
            <span>Keep indefinitely in Google Drive</span>
          </label>
          <br />
          <label>
            <input type="checkbox" name="retain_ha_one_off" id="retain_ha_one_off" class="filled-in checkbox-ha" />
            <span>Keep indefinitely in Home Assistant</span>
          </label>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <p class="left" style="margin-left: 18px; font-size: 12px;">
      These options will only apply to this one-off backup.
    </p>
    <a href="#!" class="modal-close btn-flat" id="create_backup_button"
      onclick="doNewBackup(); return false;"><i class="material-icons left">add</i>Create backup</a>
    <a href="#!" class="modal-close btn-flat" id="cancel_backup"><i class="material-icons left">close</i>Cancel</a>
  </div>
</div>
