<div class="container-fluid h-100">
  <div class="row h-100">
    <div
      class="col sidePanel shadow overflow-auto h-100 d-flex align-content-end"
    >
      <div
        class="p-0 py-2 m-auto"
        ng-class="{'card': !repoUrl,'container': repoUrl}"
      >
        <form
          class="form needs-validation"
          ng-class="{'card-body': !repoUrl}"
          name="anonymize"
          novalidate
        >
          <h5 class="card-title">Anonymize a repository</h5>
          <h6 class="card-subtitle mb-2 text-muted">
            Fill the information to anonymize! It will only take 5min.
          </h6>
          <h2>Source</h2>
          <!-- repoUrl -->
          <div class="form-group">
            <label for="repoUrl">Type the url of your repository</label>
            <input
              type="text"
              class="form-control"
              name="repoUrl"
              id="repoUrl"
              ng-class="{'is-invalid': anonymize.repoUrl.$invalid}"
              ng-model="repoUrl"
              ng-model-options="{ debounce: {default: 1000, blur: 0, click: 0}, updateOn: 'default blur click' }"
              ng-change="repoSelected()"
            />
            <div
              class="invalid-feedback"
              ng-show="anonymize.repoUrl.$error.github"
            >
              Please provide a valid Github url, e.g.,
              https://github.com/owner/repo.
            </div>
            <div
              class="invalid-feedback"
              ng-show="anonymize.repoUrl.$error.access"
            >
              {{repoUrl}} is not accessible. Some organizations are restricting
              the access to the repositories.
            </div>
            <div
              class="invalid-feedback"
              ng-show="anonymize.repoUrl.$error.missing"
            >
              {{repoUrl}} does not exist or is not accessible
            </div>
            <div
              class="invalid-feedback"
              ng-show="anonymize.repoUrl.$error.used"
            >
              {{repoUrl}} is already anonymized
            </div>
          </div>
          <!-- select repo -->
          <div class="form-group" ng-hide="repoUrl">
            <label for="repositories">Or select one of your repository</label>
            <div class="input-group mb-3">
              <select
                class="form-control"
                id="repositories"
                name="repositories"
                ng-model="repoUrl"
                ng-change="repoSelected()"
              >
                <option selected value="">None</option>
                <option
                  ng-repeat="repo in repositories|orderBy:'fullName'"
                  value="https://github.com/{{ repo.fullName }}"
                  ng-bind="repo.fullName"
                ></option>
              </select>
              <div class="input-group-append">
                <button
                  class="btn btn-outline-secondary"
                  ng-click="getRepositories(true)"
                  title="Refresh!"
                  data-toggle="tooltip"
                  data-placement="bottom"
                >
                  <i class="fa fa-undo"></i>
                </button>
              </div>
            </div>
          </div>
          <div ng-show="repoUrl">
            <!-- Branch -->
            <div class="form-group">
              <label for="branch">Branch</label>
              <div class="input-group mb-1">
                <select
                  class="form-control"
                  id="branch"
                  name="branch"
                  ng-model="source.branch"
                >
                  <option
                    ng-repeat="b in branches"
                    ng-bind="b.name"
                    value="{{b.name}}"
                  ></option>
                </select>
                <div class="input-group-append">
                  <button
                    class="btn btn-outline-secondary"
                    ng-click="getBranches(true)"
                    title="Refresh!"
                    data-toggle="tooltip"
                    data-placement="bottom"
                  >
                    <i class="fa fa-undo"></i>
                  </button>
                </div>
              </div>
              <small class="form-text text-muted">
                The branch to anonymize
              </small>
            </div>
            <div class="form-group">
              <div class="form-check">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="update"
                  name="update"
                  ng-model="options.update"
                />
                <label class="form-check-label" for="update">Auto update</label>
                <small id="updateHelp" class="form-text text-muted"
                  >Automatically update the anonymized repository with the
                  latest commit of the repository. The repository is updated
                  once per hour maximum.</small
                >
              </div>
            </div>
            <!-- Commit -->
            <div class="form-group">
              <label for="commit">Commit</label>
              <input
                class="form-control"
                id="commit"
                name="commit"
                pattern="[a-fA-Z0-9]{6,}"
                ng-model="source.commit"
                required
                ng-class="{'is-invalid': anonymize.commit.$invalid}"
              />
              <small class="form-text text-muted"
                >The SHA of the commit to anonymize.</small
              >
              <div
                class="invalid-feedback"
                ng-show="anonymize.commit.$error.pattern"
              >
                The commit SHA is not valid. It should respect this pattern
                [a-fA-Z0-9]{6,}.
              </div>
            </div>
            <h2>Conference</h2>
            <!-- Conference -->
            <div class="form-group">
              <label for="conference"
                >Conference <span class="text-muted">Optional</span></label
              >
              <input
                class="form-control"
                id="conference"
                name="conference"
                ng-model="conference"
                ng-class="{'is-invalid': anonymize.conference.$invalid}"
              />
              <small class="form-text text-muted" ng-show="conference_data"
                ><a ng-href="{{conference_data.url}}" target="_target"
                  >{{conference_data.name}}</a
                >
                will expire on {{conference_data.endDate | date}}.</small
              >

              <div
                class="invalid-feedback"
                ng-show="anonymize.conference.$error.activated"
              >
                The conference is not activated.
              </div>
              <small class="form-text text-muted" ng-show="!conference_data">
                Use the conference ID that your conference provided you. This
                will update automatically the anonymization options based on the
                conference preferences.
              </small>
            </div>
            <h2>Anonymization Options</h2>
            <!-- Repo ID -->
            <div class="form-group">
              <label for="repoId">Anonymize repository id</label>
              <input
                type="text"
                class="form-control"
                name="repoId"
                id="repoId"
                ng-class="{'is-invalid': anonymize.repoId.$invalid}"
                ng-model="repoId"
                ng-model-options="{ debounce: {default: 1000, blur: 0, click: 0}, updateOn: 'default blur click' }"
              />
              <small id="idHelp" class="form-text text-muted"
                >Id used in the url:
                https://anonymous.4open.science/r/{{repoId}}</small
              >
              <div
                class="invalid-feedback"
                ng-show="anonymize.repoId.$error.format"
              >
                Repository id can only contain letters and numbers
              </div>
              <div
                class="invalid-feedback"
                ng-show="anonymize.repoId.$error.used"
              >
                {{repoId}} is already used
              </div>
            </div>
            <!-- Terms -->
            <div class="form-group">
              <label for="terms">Terms to anonymize</label>
              <textarea
                class="form-control"
                id="terms"
                name="terms"
                rows="3"
                ng-model="terms"
                ng-model-options="{ debounce: 250 }"
                ng-class="{'is-invalid': anonymize.terms.$invalid}"
              ></textarea>
              <small id="termsHelp" class="form-text text-muted"
                >One term per line. Each term will be replaced by XXX.</small
              >
              <div
                class="invalid-feedback"
                ng-show="anonymize.terms.$error.format"
              >
                Terms are in an invalid format
              </div>
            </div>

            <div class="form-group">
              <label for="expiration">Expiration strategy</label>
              <select
                class="form-control"
                id="expiration"
                name="expiration"
                ng-model="options.expirationMode"
              >
                <option value="never" selected>Never expire</option>
                <option value="redirect">
                  Redirect to GitHub when expired
                </option>
                <option value="remove">Remove when expired</option>
              </select>
              <small class="form-text text-muted"
                >Define the expiration strategy for the anonymized
                repository.</small
              >
            </div>
            <div
              class="form-group"
              id="expiration-date-form"
              ng-hide="options.expirationMode=='never'"
            >
              <label for="expirationDate"
                >Expiration date of the anonymized repository</label
              >
              <input
                class="form-control"
                type="date"
                name="expirationDate"
                id="expirationDate"
                ng-model="options.expirationDate"
              />
              <small
                class="form-text text-muted"
                ng-show="options.expirationMode=='remove'"
                >After {{options.expirationDate | date}}, the repository will be
                removed and the visitor will not be able to see the content of
                the repository.</small
              >
              <small
                class="form-text text-muted"
                ng-show="options.expirationMode=='redirect'"
                >After {{options.expirationDate | date}}, the visitors of the
                anonymized repository will be redirected to {{repoUrl}}.</small
              >
            </div>

            <div class="accordion mb-3" id="options">
              <div class="card">
                <div class="card-header" id="headingOne">
                  <h2 class="mb-0">
                    <button
                      class="btn btn-block text-left"
                      type="button"
                      data-toggle="collapse"
                      data-target="#collapseOne"
                      aria-expanded="true"
                      aria-controls="collapseOne"
                    >
                      Advance options
                    </button>
                  </h2>
                </div>

                <div
                  id="collapseOne"
                  class="collapse show"
                  aria-labelledby="headingOne"
                  data-parent="#options"
                >
                  <div class="card-body">
                    <div class="form-group">
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="link"
                          name="link"
                          ng-model="options.link"
                        />
                        <label class="form-check-label" for="link"
                          >Keep links</label
                        >
                        <small id="termsHelp" class="form-text text-muted"
                          >Keep or remove all the links.</small
                        >
                      </div>
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="image"
                          name="image"
                          ng-model="options.image"
                        />
                        <label class="form-check-label" for="image"
                          >Display images</label
                        >
                        <small id="termsHelp" class="form-text text-muted"
                          >Images are not anonymized</small
                        >
                      </div>
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="pdf"
                          name="pdf"
                          ng-model="options.pdf"
                        />
                        <label class="form-check-label" for="pdf"
                          >Display PDFs</label
                        >
                        <small id="termsHelp" class="form-text text-muted"
                          >PDF are not anonymized</small
                        >
                      </div>
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="notebook"
                          name="notebook"
                          ng-model="options.notebook"
                        />
                        <label class="form-check-label" for="notebook"
                          >Display Notebooks</label
                        >
                      </div>

                      <div class="form-group">
                        <label for="mode">Proxy mode</label>
                        <select
                          class="form-control"
                          id="mode"
                          name="mode"
                          ng-model="source.type"
                        >
                          <option value="GitHubStream" selected>Stream</option>
                          <option value="GitHubDownload">Download</option>
                        </select>
                        <small class="form-text text-muted"
                          >How the repository will be anonymized. Stream mode
                          will request the content on the flight. This is the
                          only option for repositories bigger than
                          {{site_options.MAX_REPO_SIZE * 1024| humanFileSize}}.
                          Download will download the repository the repository
                          on the anonymous.4open.science server, it is faster
                          and offer more features.</small
                        >
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="page"
                          name="page"
                          ng-model="options.page"
                          ng-disabled="!details.has_pages"
                        />
                        <label class="form-check-label" for="page"
                          >Github page</label
                        >
                        <small id="termsHelp" class="form-text text-muted"
                          >Enable anonymized Github pages. It currently only
                          supported for Github pages that are defined in the
                          same branch. It will be available at
                          https://anonymous.4open.science/w/{{repoId}}</small
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="alert alert-danger"
            role="alert"
            ng-if="error"
            ng-bind="error"
          ></div>
          <button
            id="submit"
            type="submit"
            class="btn btn-primary"
            ng-click="anonymizeRepo($event)"
            ng-show="repoUrl"
            ng-if="!isUpdate"
          >
            Anonymize
          </button>
          <button
            id="submit"
            type="submit"
            class="btn btn-primary"
            ng-click="updateRepo($event)"
            ng-show="repoUrl"
            ng-if="isUpdate"
          >
            Update
          </button>
        </form>
      </div>
    </div>
    <div
      class="col-9 p-2 h-100 overflow-auto markdown-body body"
      ng-bind-html="html_readme"
      ng-if="html_readme"
    ></div>
  </div>
</div>
