<div class="container" ng-show="user.anonymous">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="user-setup" redirect-url="'/new/'"></div>
  </div>
</div>

<div class="container" ng-show="!user.anonymous && building">
  <div class="quay-spinner"></div>
</div>

<div class="container" ng-show="!user.anonymous && creating">
  <div class="quay-spinner"></div>
</div>

<div class="container new-repo" ng-show="!user.anonymous && !creating && !building">
  <form method="post" name="newRepoForm" id="newRepoForm" ng-submit="createNewRepo()">

  <!-- Header -->
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="section">
        <div class="new-header">
          <span style="color: #444;">
            <span class="namespace-selector" user="user" namespace="repo.namespace" require-create="true"></span>
            <span style="color: #ccc">/</span>
            <span class="name-container">
              <input id="repoName" name="repoName" type="text" class="form-control" placeholder="Repository Name" ng-model="repo.name"
                     required autofocus data-trigger="manual" data-content="{{ createError }}" data-placement="right" ng-pattern="/^[.a-z0-9_-]+$/">
            </span>
            <span class="alert alert-warning" ng-show="!newRepoForm.repoName.$error.required && !newRepoForm.repoName.$valid" style="margin-left: 10px;">
              Repository names must match [a-z0-9_-]+
            </span>
        </div>
      </div>
      
      <div class="section">
        <div class="section-title">Repository Description</div>
        <br>
        <div class="description markdown-input" content="repo.description" can-write="true"
             field-title="'repository description'"></div>
      </div>
    </div>
  </div>

  <!-- Private/public -->
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="section-title">Repository Visibility</div>
      <div class="section">
        <div class="repo-option">
          <input type="radio" id="publicrepo" name="publicorprivate" ng-model="repo.is_public" value="1">
          <i class="fa fa-unlock fa-large" data-title="Public Repository"></i>
          
          <div class="option-description">
            <label for="publicrepo"><strong>Public</strong></label>
            <span class="description-text">Anyone can see and pull from this repository. You choose who can push.</span>
          </div>
        </div>
        <div class="repo-option">
          <input type="radio" id="privaterepo" name="publicorprivate" ng-model="repo.is_public" value="0">
          <i class="fa fa-lock fa-large" data-title="Private Repository"></i>
          
          <div class="option-description">
            <label for="privaterepo"><strong>Private</strong></label>
            <span class="description-text">You choose who can see, pull and push from/to this repository.</span>
          </div>
        </div>

        <!-- Payment -->
        <div class="required-plan" ng-show="repo.is_public == '0' && planRequired && planRequired.title">
          <div class="alert alert-warning">
          In order to make this repository private 
          <span ng-if="isUserNamespace">under your personal namespace</span>
          <span ng-if="!isUserNamespace">under the organization <b>{{ repo.namespace }}</b></span>, you will need to upgrade your plan to
          <b style="border-bottom: 1px dotted black;" data-html="true"
             data-title="{{ '<b>' + planRequired.title + '</b><br>' + planRequired.privateRepos + ' private repositories' }}" bs-tooltip>
            {{ planRequired.title  }}
          </b>.
          This will cost $<span>{{ planRequired.price / 100 }}</span>/month.
          </div>
          <a class="btn btn-primary" ng-click="upgradePlan()" ng-show="!planChanging">Upgrade now</a>
          <span ng-if="isUserNamespace && user.organizations.length == 1">or did you mean to create this repository
            under <a href="javascript:void(0)" ng-click="changeNamespace(user.organizations[0].name)"><b>{{ user.organizations[0].name }}</b></a>?</span>
          <div class="quay-spinner" ng-show="planChanging"></div>
        </div>

        <div class="quay-spinner" ng-show="repo.is_public == '0' && checkingPlan"></div>

        <div class="required-plan" ng-show="repo.is_public == '0' && planRequired && !isUserNamespace && !planRequired.title">
          <div class="alert alert-warning">
            This organization has reached its private repository limit. Please contact your administrator.
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="section">
        <div class="section-title">Initialize repository</div>

        <div style="padding-top: 10px;">
          <!-- Empty -->
          <div class="repo-option">
            <input type="radio" id="initEmpty" name="initialize" ng-model="repo.initialize" value="">
            <i class="fa fa-hdd-o fa-lg" style="padding: 6px; padding-left: 8px; padding-right: 6px;"></i>
            <label for="initEmpty" style="color: #aaa;">(Empty repository)</label>
          </div>

          <!-- Dockerfile -->
          <div class="repo-option">
            <input type="radio" id="initDockerfile" name="initialize" ng-model="repo.initialize" value="dockerfile">
            <i class="fa fa-file fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 8px;"></i>
            <label for="initDockerfile">Initialize from a <b>Dockerfile</b></label>
          </div>

          <!-- Zip/TarGz file -->
          <div class="repo-option">
            <input type="radio" id="initZipfile" name="initialize" ng-model="repo.initialize" value="zipfile">
            <i class="fa fa-archive fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 8px;"></i>
            <label for="initZipfile">Initialize from a <b>Dockerfile</b> inside a <code>.zip</code> or <code>.tar.gz</code> archive</label>
          </div>

          <!-- Github -->
          <div class="repo-option">
            <input type="radio" id="initGithub" name="initialize" ng-model="repo.initialize" value="github">
            <i class="fa fa-github fa-lg" style="padding: 6px; padding-left: 10px; padding-right: 12px;"></i>
            <label for="initGithub">Link to a GitHub Repository</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row" ng-show="repo.initialize == 'dockerfile' || repo.initialize == 'zipfile'">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="section">
        <div class="section-title">Upload <span ng-if="repo.initialize == 'dockerfile'">Dockerfile</span><span ng-if="repo.initialize == 'zipfile'">Archive</span></div>
        <div style="padding-top: 20px;">
          <div class="initialize-repo">
            <div class="dockerfile-build-form" repository="createdForBuild" upload-failed="handleBuildFailed(message)"
                 build-started="handleBuildStarted()" build-failed="handleBuildFailed(message)" start-now="createdForBuild"
                 has-dockerfile="hasDockerfile" uploading="uploading" building="building"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row" ng-show="repo.initialize == 'github'">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <div class="alert alert-info">
        You will be redirected to authorize via GitHub once the repository has been created
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8">
      <button class="btn btn-large btn-success" type="submit"
              ng-disabled="uploading || building || newRepoForm.$invalid || (repo.is_public == '0' && (planRequired || checkingPlan)) || ((repo.initialize == 'dockerfile' || repo.initialize == 'zipfile') && !hasDockerfile)">
        Create Repository
      </button>
    </div>
  </div>

  </form>
</div>

<!-- Modal edit for the description -->
<div class="modal fade" id="editModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Edit Repository Description</h4>
      </div>
      <div class="modal-body">
        <div class="wmd-panel">
          <div id="wmd-button-bar-description"></div>	    
          <textarea class="wmd-input" id="wmd-input-description" placeholder="Enter description">{{ repo.description }}</textarea>
        </div>
        
        <div id="wmd-preview-description" class="wmd-panel wmd-preview"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="saveDescription()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal message dialog -->
<div class="modal fade" id="cannotcreateModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot create repository</h4>
      </div>
      <div class="modal-body">
        The repository could not be created.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal message dialog -->
<div class="modal fade" id="couldnotsubscribeModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot upgrade plan</h4>
      </div>
      <div class="modal-body">
        Your current plan could not be upgraded. Please try again.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->