<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-6 col-md-offset-3">

      <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 &nbsp;
                      <a href="https://github.com/githubsaturn/captainduckduck/wiki/App-Configuration#persistent-data" target="_blank" rel="noopener noreferrer">
                        <i class="fa fa-info-circle" aria-hidden="true"></i>
                      </a>
                    </label>
                  </div>
                </div>

                <hr>
                <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-10 col-md-offset-1">
      <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="large 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-10 col-md-offset-1">
      <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 internally available 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">
                  <label uib-tooltip="Use this if you don't want your app be externally available.">
                    <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 class="row">

                    <button ng-show="!app.customNginxConfig" class="btn btn-info" ng-click="onEditDefaultNginxConfigClicked(app)">
                      Edit Default Nginx Configurations</button>

                    <div ng-show="app.customNginxConfig">

                      <p>
                        Note that templates are build using EJS template pattern. Do not change the areas beween &lt;&percnt; and &percnt;&gt; unless
                        you really know what you're doing!
                      </p>

                      <div class="row">
                        <div class="col-sm-12">
                          <div class="form-group">
                            <textarea style="font-family: monospace" rows="17" ng-model="app.customNginxConfig" placeholder="" class="form-control" id="textareaAppNginxConfig"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>

                  <br>

                  <div class="checkbox">
                    <label>
                      <input type="checkbox" ng-model="app.forceSsl"> Enforce HTTPS by redirecting all HTTP traffic to HTTPS
                    </label>
                  </div>

                </div>


              </div>
            </div>

            <hr>

            <h4>Deployment</h4>
            <hr>
            <div class="row alerts-container" ng-show="app.isAppBuilding">
              <uib-alert type="info">
                <div style="padding-left: 20px; padding-top: 10px" class="row">
                  <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>
              </uib-alert>
            </div>
            <div class="row">
              <div class="row">
                <a href="" ng-click="onExpandLogClicked(app)">
                  <h4>{{!app.expandedLogs? 'View':'Hide'}} Build Logs</h4>
                </a>
              </div>

              <div class="row" ng-show="app.isAppBuilding || app.expandedLogs">
                <textarea id="buildlog-text-id" style="padding:10px; background: #eeeeee" rows="10" readonly="readonly" class="col-sm-12">{{app.buildLogs}}</textarea>
              </div>

            </div>
            <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>Make sure that you have a 'captain-definition' file in your project. See
                  <a href="https://github.com/githubsaturn/captainduckduck/wiki/Captain-Definition-File" target="_blank">docs</a> for more details.</p>
                <h5>
                  <b> Method 1 (RECOMMENDED)</b>
                </h5>
                <p>Use CLI deploy command. This is the best method as it's the only method that reports potential build failures
                  to you.
                  <a href="https://github.com/githubsaturn/captainduckduck/wiki/Getting-Started#step-4-deploy-the-test-app" target="_blank">Read here</a>
                </p>
                <h5>
                  <b> Method 2: Tarball</b>
                </h5>
                <p>
                  You can simply create a tarball (
                  <code>.tar</code>) of your project and upload it here via upload button.
                </p>
                <div class="row">
                  <div class="col-lg-12">

                    <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">
                  <h5>
                    <b>
                      Method 3: Deploy from Github/Bitbucket/Gitlab</b>
                  </h5>
                  <p>
                    Enter your repository information in the form and save. Then copy the URL in the box as a webhook on Github, Bitbucket, Gitlab
                    and etc. Once you push a commit, CaptainDuckDuck starts a new build.
                    <br>
                    <pre>{{app.appPushWebhook.pushWebhookToken?(rootDomainWithProtocol+'/api/v1/user/webhooks/triggerbuild?namespace=captain&token='+app.appPushWebhook.pushWebhookToken):
                      '** Add repo info and save for this webhook to appear **'}}</pre>
                  </p>
                </div>
                <br>
                <div class="row">
                  <div class="form-group col-sm-6">
                    <div class="input-group">
                      <span class="input-group-addon">Username:</span>
                      <input type="text" class="form-control" ng-model="app.appPushWebhook.repoInfo.user" placeholder="myemail@gmail.com">
                    </div>
                  </div>
                  <div class="col-sm-6 form-group">
                    <div class="input-group" uib-tooltip="Enter 123123 (or anything else!) for public repos">
                      <span class="input-group-addon">Password:</span>
                      <input type="text" class="form-control" ng-model="app.appPushWebhook.repoInfo.password" placeholder="githubpassword">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-sm-6">
                    <div class="input-group">
                      <span class="input-group-addon">Repository:</span>
                      <input type="text" class="form-control" ng-model="app.appPushWebhook.repoInfo.repo" placeholder="github.com/someone/something">
                    </div>
                  </div>
                  <div class="col-sm-6 form-group">
                    <div class="input-group">
                      <span class="input-group-addon">Branch:</span>
                      <input type="text" class="form-control" ng-model="app.appPushWebhook.repoInfo.branch" placeholder="master">
                    </div>
                  </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>

              <h4>Port Mapping &nbsp;
                <a href="https://github.com/githubsaturn/captainduckduck/wiki/App-Configuration#port-mapping" target="_blank" rel="noopener noreferrer">
                  <i class="fa fa-info-circle" aria-hidden="true"></i>
                </a>
              </h4>
              <div ng-show="!app.ports || !app.ports.length">
                <i>Currently, this app does not have any custom port mapping.
                </i>
              </div>
              <br>
              <div class="row" ng-repeat="pt in app.ports">
                <div class="form-group col-sm-6">
                  <div class="input-group" uib-tooltip="Make sure the port is not used!">
                    <span class="input-group-addon">Server Public Port:</span>
                    <input style="height:50px" type="text" class="form-control" ng-model="pt.hostPort" placeholder="4545">
                  </div>
                </div>
                <div class="col-sm-6 form-group">
                  <div class="input-group">
                    <span class="input-group-addon">Container Port:</span>
                    <textarea style="height:50px;padding-top:13px" type="text" class="form-control" ng-model="pt.containerPort" placeholder="80"></textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <button type="button" ng-click="addPortMappingClicked(app)" class="btn btn-default">Add Port Mapping</button>
                </div>
              </div>
            </div>

            <hr>

            <div ng-show="app.hasPersistentData">
              <h4>Persistent Directories &nbsp;
                <a href="https://github.com/githubsaturn/captainduckduck/wiki/App-Configuration#persistent-data" target="_blank" rel="noopener noreferrer">
                  <i class="fa fa-info-circle" aria-hidden="true"></i>
                </a>


              </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-4">
                  <div class="input-group">
                    <span class="input-group-addon">Path in App:</span>
                    <input type="text" class="form-control" ng-model="vol.containerPath" placeholder="/some/thing">
                  </div>
                </div>
                <div ng-show="!!vol.hostPath" class="form-group col-sm-4">
                  <div class="input-group" uib-tooltip="IMPORTANT: Ensure Host Path exists before assigning it here">
                    <span class="input-group-addon">Path on Host:</span>
                    <input type="text" class="form-control" ng-model="vol.hostPath" placeholder="/host/path/exists">
                  </div>
                </div>
                <div ng-show="!vol.hostPath" class="form-group col-sm-4">
                  <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="form-group col-sm-4">
                  <button ng-show="!vol.hostPath" type="button" class="btn btn-sm btn-default" ng-click="setHostPath(vol,'/')">Set specific host path</button>
                  <button ng-show="vol.hostPath" type="button" class="btn btn-sm btn-default" ng-click="setHostPath(vol,'')">Let Captain manage host path</button>
                </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>

              <hr>

              <div class="row">
                <div class="form-group col-md-6">
                  <div class="input-group">
                    <span class="input-group-addon">

                      <a href="" uib-tooltip="Click to edit" ng-click="unlockNodeId(app)">
                        Node ID &nbsp;
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                      </a>

                    </span>
                    <input uib-tooltip="Leave empty for automatic placement" type="text" class="form-control" ng-disabled="!app.unlockNodeIdForEdit" ng-model="app.nodeId">
                  </div>
                  <div class="input-group">
                  </div>
                </div>
                <div class="col-md-6">
                  <p>
                    <b>WARNING: </b>Changing Node ID causes the content of your persistent directories to be deleted!
                  </p>
                </div>
              </div>

            </div>

            <hr>

            <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="number" 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>