<form name="form" class="modal-content ups-modal-content">
  <div class="modal-header">
    <button type="button" class="close" aria-hidden="true" ng-click="cancel()">
      <span class="pficon pficon-close"></span>
    </button>
    <h4 class="modal-title">{{ variant.id ? 'Edit' : 'Add' }} Variant</h4>
  </div>
  <div class="modal-body">
    <div class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label" for="createAppName">Name</label>
        <div class="col-sm-7">
          <input type="text" placeholder="e.g. Demo" id="createAppName" class="form-control" ng-model="variant.name" required pf-focused="true">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label" for="createAppDescription">Description</label>
        <div class="col-sm-7">
          <input type="text" placeholder="e.g. The free demo version" id="createAppDescription" class="form-control" ng-model="variant.description">
        </div>
      </div>

      <div class="form-group" ng-hide="variant.id">
        <hr>
        <label class="col-sm-3 control-label"></label>
        <div class="ups-platform-selection col-sm-7">
          <div class="row">
            <div class="radio ups-radio">
              <input type="radio" name="createVariantType" id="variantTypeAndroid" ng-model="variant.type" value="android" ng-required="true">
              <label for="variantTypeAndroid">
                <div class="ups-platform android">
                  <strong>Android</strong><br>
                  <span>using Google Cloud Messaging</span>
                </div>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="radio ups-radio">
              <input type="radio" name="createVariantType" id="variantTypeIOS" ng-model="variant.type" value="ios"  ng-required="true">
              <label for="variantTypeIOS">
                <div class="ups-platform ios">
                  <strong>iOS</strong><br>
                  <span>using Apple Push Network</span>
                </div>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="radio ups-radio">
              <input type="radio" name="createVariantType" id="variantTypeChrome" ng-model="variant.type" value="chrome"  ng-required="true">
              <label for="variantTypeChrome">
                <div class="ups-platform chrome">
                <b>Chrome</b><br />
                <span>using Google Cloud Messaging for Chrome</span>
                </div>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="radio ups-radio">
              <input type="radio" name="createVariantType" id="variantTypeSimplePush" ng-model="variant.type" value="simplePush"  ng-required="true">
              <label for="variantTypeSimplePush">
                <div class="ups-platform simplepush">
                <b>SimplePush</b><br />
                <span>using the Mozilla WebAPI</span>
                </div>
              </label>
            </div>
          </div>
        </div>
        <hr>
      </div>

      <div ng-show="variant.type">

        <div ng-show="variant.type == 'android'">
          <div class="form-group">
            <label class="col-sm-3 control-label" for="gcmApiKey">Push Network</label>
            <div class="col-sm-7"><em>Google Cloud Messaging</em> Key<br>
              <input type="text" placeholder="e.g. 5a448c2f31700a466fbc9d33d33942b043a27596" id="gcmApiKey" class="form-control" ng-model="variant.googleKey" ng-required="variant.type == 'android'">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label" for="gcmProjectNumber"></label>
            <div class="col-sm-7">
              Project Number<br>
              <input type="text" placeholder="e.g. 42" id="gcmProjectNumber" class="form-control" ng-model="variant.projectNumber" ng-required="variant.type == 'android'">
            </div>
          </div>
        </div>

        <div ng-show="variant.type == 'ios'">
          <div class="form-group">
            <label class="col-sm-3 control-label">Push Network</label>
            <div class="col-sm-7">
              <p><em>Apple Push Notification Service</em> certificate:</p>
              <strong><input type="file" ups-files="variant.certificates" /></strong>
              <div class="form-horizontal">
                <div class="form-group">
                  <div class="row">
                    <br><label class="col-sm-3 control-label">Type</label>
                    <div class="col-sm-9">
                      <div class="row">
                        <div class="radio">
                          <label>
                            <input type="radio" name="iosType" id="iosType1" ng-model="variant.production" value="true" ng-required="variant.type == 'ios'">
                            Production
                          </label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="radio">
                          <label>
                            <input type="radio" name="iosType" id="iosType2" ng-model="variant.production" value="false" ng-required="variant.type == 'ios'">
                            Development
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label" for="iosPassphrase">Passphrase</label>
                  <div class="col-sm-9">
                    <input type="password" id="iosPassphrase" class="form-control" ng-model="variant.passphrase" ng-required="variant.type == 'ios' && !variant.id">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div ng-show="variant.type == 'chrome'">
          <div class="form-group">
            <label class="col-sm-3 control-label">Push Network</label>
            <div class="col-sm-7">
              <div class="form-group">
                <label class="col-sm-5 control-label" for="chromeClientId">Client ID</label>
                <div class="col-sm-7">
                  <input type="text" placeholder="e.g. 291796959215.apps.googleusercontent.com" id="chromeClientId" class="form-control" ng-model="variant.clientId" ng-required="variant.type == 'chrome'">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-5 control-label" for="chromeClientSecret">Client Secret</label>
                <div class="col-sm-7">
                  <input type="text" placeholder="e.g. 0bKUtXN6ykk7Mj1lQxoBZ2mh" id="chromeClientSecret" class="form-control" ng-model="variant.clientSecret" ng-required="variant.type == 'chrome'">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-5 control-label" for="chromeRefreshToken">Refresh Token</label>
                <div class="col-sm-7">
                  <input type="text" placeholder="e.g. 1%wMfyZvGcCxMSNEX4iTRdE0H1_Yt0wvImBz_iCuXF-UM" id="chromeRefreshToken" class="form-control" ng-model="variant.refreshToken" ng-required="variant.type == 'chrome'">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <input type="button" class="btn btn-default" ng-click="cancel()" value="Cancel" />
    <input type="submit" class="btn btn-primary" ng-click="ok(variant)" ng-disabled="form.$invalid" value="{{ variant.id ? 'Save' : 'Add' }}" />
  </div>
</form>
