<rd-loading ng-show="loadingState.enabled">
</rd-loading>

<div ng-show="!loadingState.enabled">
  <div class="row" ng-show="!editContent.appsToEdit.length">
    <div class="col-md-4"></div>
    <div class="col-md-4">

      <rd-widget>
        <rd-widget-header icon="fa-plus" title="Create A New App">
        </rd-widget-header>
        <rd-widget-body>

          <div class="row">
            <form class="col-md-12">
              <div class="form-group">
                <div class="input-group">

                  <input type="text" class="form-control" id="new-app-name" placeholder="my-amazing-app" ng-model="newAppData.newAppToRegister">
                  <span class="input-group-btn ">
                    <button type="submit" class="btn btn-primary" ng-click="onCreateNewAppClicked()">Create a New App</button>
                  </span>

                </div>
                <div class="input-group">
                  <div class="checkbox" uib-tooltip="Mostly used for databases, see docs for details.">
                    <label>
                      <input type="checkbox" ng-model="newAppData.newAppHasPersistentData"> Has Persistent Data
                    </label>
                  </div>
                </div>

                <hr/>
                <br/>
                <div class="text-center">Or Select From</div>
                <br/>

                <div class="text-center">
                  <button type="submit" class="btn btn-primary" ng-click="onCreateOneClickAppClick()">One-Click Apps/Databases</button>
                </div>
              </div>
            </form>
          </div>
        </rd-widget-body>
      </rd-widget>

    </div>
  </div>

  <div class="row" ng-show="!editContent.appsToEdit.length && allApps && !!allApps.length">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <br/>
      <br/>

      <rd-widget>

        <rd-widget-header icon="fa-code" title="Your Apps">
          <input type="text" placeholder="Search by Name" ng-model="search.appName" class="form-control input-sm" />
        </rd-widget-header>

        <rd-widget-body classes="medium no-padding">

          <div class="row">

            <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th style="padding-left: 35px;">App Name</th>
                    <th class="text-center">Persistent Data</th>
                    <th class="text-center">Exposed Webapp</th>
                    <th class="text-center">Instance Count</th>
                    <th class="text-center">Open in Browser</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="app in allApps | filter:search">
                    <td style="padding-left: 15px;">
                      <a href="" ng-click="openAppEdit(app)">
                        <i style="margin-right: 10px" class="fa fa-pencil" aria-hidden="true"></i>
                        {{app.appName}}
                      </a>
                    </td>
                    <td class="text-center">{{app.hasPersistentData?'✔':''}}</td>
                    <td class="text-center">{{!app.notExposeAsWebApp?'✔':''}}</td>
                    <td class="text-center">{{app.instanceCount}}</td>
                    <td class="text-center">
                      <div ng-show="!app.notExposeAsWebApp">

                        <a href="http{{(app.hasDefaultSubDomainSsl?'s':'')+'://'+app.appName+'.'+rootDomain}}" target="_blank" rel="noopener noreferrer">
                          <i class="fa fa-external-link" aria-hidden="true"></i>
                        </a>

                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>


  <div class="row" ng-repeat="app in editContent.appsToEdit" ng-show="editContent.appsToEdit.length">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <br/>
      <br/>

      <rd-widget>
        <rd-widget-header icon="fa-code" title="{{app.appName}}">
          <div class="pull-right">
            <a href="" ng-click="closeAppEdit(app)">
              <i class="fa fa-times" aria-hidden="true"></i>
            </a>
          </div>
        </rd-widget-header>
        <rd-widget-body>

          <div class="row">

            <h4>Access your app</h4>
            <div class="row">
              <div class="col-lg-12">
                <p>Your app is interally avilable as
                  <code>srv-captain--{{app.appName}}</code> to other Captain apps. In case of web-app, it is accessible via
                  <code>http://srv-captain--{{app.appName}}</code> from other apps.</p>

                <div class="checkbox" uib-tooltip="Use this if you don't want your app be externally available.">
                  <label>
                    <input type="checkbox" ng-model="app.notExposeAsWebApp"> Do not expose as web-app
                  </label>
                </div>

                <div ng-show="!app.notExposeAsWebApp">
                  <div class="row">
                    <div class="col-lg-12">

                      <p>Your app is available to public at:</p>
                      <a href="http{{(app.hasDefaultSubDomainSsl?'s':'')+'://'+app.appName+'.'+rootDomain}}" target="_blank" rel="noopener noreferrer">
                        http{{(app.hasDefaultSubDomainSsl?'s':'')+'://'+app.appName+'.'+rootDomain}}</a>
                      <div class="pull-right">
                        <button type="button" class="btn btn-sm btn-success" ng-disabled="app.hasDefaultSubDomainSsl" ng-click="onEnableBaseDomainSsl(app.appName)">Enable HTTPS</button>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <form class="col-xl-10 col-lg-12">

                      <div class="form-group">
                        <div class="input-group">
                          <input type="text" class="form-control" ng-model="app.newCustomDomain" id="customDomain" placeholder="www.the-best-app-in-the-world.com">
                          <span class="input-group-btn ">
                            <button type="submit" class="btn btn-primary" uib-tooltip="Make sure it points to this IP, otherwise verification will fail."
                              ng-click="onNewCustomDomainClicked(app.appName,app.newCustomDomain)">
                              Connect New Domain</button>
                          </span>
                        </div>
                      </div>
                    </form>
                  </div>

                  <br/>

                  <div ng-repeat="c in app.customDomain">

                    <div class="row">

                      <div style="margin-top: 5px" class="col-md-9">
                        <a style="color: #777777;" href="http://{{c.publicDomain}}">{{c.publicDomain}}</a>
                      </div>

                      <div class="col-md-3">
                        <div class="pull-right">

                          <form class="col-md-3">
                            <div class="form-group">
                              <div class="input-group">
                                <span class="input-group-btn ">
                                  <button ng-disabled="c.hasSsl" ng-click="onEnableCustomDomainSslClicked(app.appName,c.publicDomain)" type="button" class="btn btn-success">Enable HTTPS</button>
                                  <button type="button" ng-click="onRemoveCustomDomainClicked(app.appName,c.publicDomain)" class="btn btn-default btn-with-icon">
                                    <i class="fa-minus-circle fa"></i> Remove
                                  </button>
                                </span>
                              </div>
                            </div>
                          </form>

                        </div>
                      </div>

                    </div>

                    <br/>

                  </div>
                </div>
              </div>
            </div>

            <hr/>

            <h4>Deployment</h4>
            <div class="row">
              <div class="col-lg-12">
                <p>
                  <b>Current Version: </b>{{app.deployedVersion}}
                  <br/>
                  <b>Git Commit Hash: </b> {{app.deployedGitHash}}
                  <br/>
                  <b>Deployed at</b> {{app.deployedTimeStamp}}
                  <br/>
                </p>
                <p>You can deploy your app using the Captain command line tool (recommended) or via this web interface. No matter
                  what approach you choose, you need to provide 'captain-definition' file. See docs for more details.</p>
                <div class="row">
                  <div class="col-lg-6">

                    <label class="btn btn-sm btn-default btn-file">
                      Select TAR source file
                      <input type="file" style="display: none;" fileread="app.sourceToUpload">
                    </label>

                    <button type="button" class="btn btn-sm btn-primary pull-right" ng-disabled="!app.sourceToUpload"
                      ng-click="onUploadSourceCodeClicked(app)">Upload &amp; Deploy</button>

                    <p style="padding-top: 5px;">
                      <i>{{app.sourceToUpload.name}}</i>
                    </p>

                  </div>
                  <div class="col-lg-3">
                  </div>
                </div>
                <div class="row" ng-show="app.isAppBuilding">
                  <div class="pull-left">
                    <div class="inline-loader"></div>
                  </div>
                  <div style="margin-left: 15px;" class="pull-left">
                    Building the image. This might take a few minutes...
                  </div>
                </div>
              </div>
            </div>

            <hr/>

            <div>

              <h4>Environmental Variables:</h4>
              <div ng-show="!app.envVars || !app.envVars.length">
                <i>Currently, this app does not have any custom environmental variables yet.</i>
              </div>
              <br/>
              <div class="row" ng-repeat="ev in app.envVars">
                <div class="form-group col-sm-6">
                  <div class="input-group">
                    <span class="input-group-addon">Key:</span>
                    <input style="height:50px" type="text" class="form-control" ng-model="ev.key" placeholder="Key">
                  </div>
                </div>
                <div class="col-sm-6 form-group">
                  <div class="input-group">
                    <span class="input-group-addon">Value:</span>
                    <textarea style="height:50px;padding-top:13px;" type="text" class="form-control" ng-model="ev.value" placeholder="Value"></textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <button type="button" ng-click="addEnvVarClicked(app)" class="btn btn-default">Add Key/Value Pair</button>
                </div>
              </div>
            </div>

            <hr/>

            <div ng-show="app.hasPersistentData">
              <h4>Persistent Directories:</h4>
              <div ng-show="!app.volumes || !app.volumes.length">
                <i>Currently, this app does not have any persistent directories.</i>
              </div>
              <br/>
              <div class="row" ng-repeat="vol in app.volumes">
                <div class="form-group col-sm-6">
                  <div class="input-group">
                    <span class="input-group-addon">Label:</span>
                    <input type="text" class="form-control" ng-model="vol.volumeName" placeholder="some-name">
                  </div>
                </div>
                <div class="col-sm-6 form-group">
                  <div class="input-group">
                    <span class="input-group-addon">Directory:</span>
                    <input type="text" class="form-control" ng-model="vol.containerPath" placeholder="/some/thing">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <button type="button" ng-click="addVolumeClicked(app)" class="btn btn-default">Add Directory</button>
                </div>
              </div>
            </div>

            <br/>

            <div class="form-group col-xs-6">
              <div class="input-group" uib-tooltip="{{app.hasPersistentData?'Cannot change instances of an app with persistent data':'Number of running instances of this app'}}">
                <span class="input-group-addon">Instance Count:</span>
                <input type="text" class="form-control" ng-disabled="app.hasPersistentData" ng-model="app.instanceCount">
              </div>
            </div>

            <div class="col-md-12" style="margin-top: 50px">
              <button type="button" class="btn btn-danger" ng-click="onDeleteAppClicked(app.appName)">Delete App</button>
              <div class="pull-right">
                <button type="button" class="btn btn-primary" ng-click="onUpdateConfigAndSave(app)">Save &amp; Update Configuration</button>
              </div>
            </div>
          </div>

        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>