<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://captainduckduck.com/docs/app-configuration.html#persistent-or-not" 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>