<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta http-equiv="Content-Security-Policy" content="default-src <%= apiOrigin %> 'unsafe-inline' 'unsafe-eval' 'self'; img-src <%= apiOrigin %> 'self'" />

    <title>Cloudron Account Setup</title>

    <link id="favicon" href="<%= apiOrigin %>/api/v1/cloudron/avatar" rel="icon" type="image/png">

    <!-- Theme CSS -->
    <link type="text/css" rel="stylesheet" href="/theme.css?<%= revision %>">

    <!-- Fontawesome -->
    <link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.css?<%= revision %>"/>

    <!-- jQuery-->
    <script type="text/javascript" src="/3rdparty/js/jquery.min.js?<%= revision %>"></script>

    <!-- async -->
    <script type="text/javascript" src="/3rdparty/js/async-3.2.0.min.js?<%= revision %>"></script>

    <!-- Bootstrap Core JavaScript -->
    <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js?<%= revision %>"></script>

    <!-- Angularjs scripts -->
    <script type="text/javascript" src="/3rdparty/js/angular.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-loader.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-cookies.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/autofill-event.js?<%= revision %>"></script>

    <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
    <script type="text/javascript" src="/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js?<%= revision %>"></script>

    <!-- Showdown (markdown converter) -->
    <script type="text/javascript" src="/3rdparty/js/showdown-1.9.1.min.js?<%= revision %>"></script>

    <!-- Angular translate https://angular-translate.github.io/ -->
    <script type="text/javascript" src="/3rdparty/js/angular-translate.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-translate-loader-static-files.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-cookie.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-local.min.js?<%= revision %>"></script>

    <!-- Setup Application -->
    <script type="text/javascript" src="/js/setupaccount.js?<%= revision %>"></script>

</head>

<body ng-app="Application" ng-controller="SetupAccountController">

<div class="layout-root" ng-show="initialized">

  <div class="layout-content" ng-show="view === 'setup'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h1><small>{{ 'setupAccount.welcomeTo' | tr }}</small> {{ status.cloudronName || 'Cloudron' }}</h1>
          <h3>{{ 'setupAccount.description' | tr }}</h3>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-12">
          <h4 class="has-error" ng-show="error">{{ error.message }}</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <form name="setupAccountForm" ng-submit="onSubmit()" autocomplete="off">
            <input type="password" style="display: none;">

            <div class="form-group" ng-class="{ 'has-error': ((setupAccountForm.username.$dirty && setupAccountForm.username.$invalid) || (!setupAccountForm.username.$dirty && error.username))}">
              <label class="control-label" for="inputUsername">{{ 'setupAccount.username' | tr }}</label>
              <div class="control-label" ng-show="setupAccountForm.username.$dirty && setupAccountForm.username.$invalid">
              <small ng-show="setupAccountForm.username.$error.minlength">{{ 'setupAccount.errorUsernameTooShort' | tr }}</small>
              <small ng-show="setupAccountForm.username.$error.maxlength">{{ 'setupAccount.errorUsernameTooLong' | tr }}</small>
              <small ng-show="setupAccountForm.username.$dirty && setupAccountForm.username.$invalid">{{ 'setupAccount.errorUsernameInvalid' | tr }}</small>
              </div>
              <input type="text" class="form-control" ng-model="username" name="username" id="inputUsername" ng-disabled="profileLocked || existingUsername" required autofocus>
            </div>

            <div class="form-group">
              <label class="control-label" for="inputDisplayName">{{ 'setupAccount.fullName' | tr }}</label>
              <input type="displayName" class="form-control" ng-model="displayName" name="displayName" id="inputDisplayName" ng-disabled="profileLocked" required>
            </div>

            <div class="form-group" ng-class="{ 'has-error': (setupAccountForm.password.$dirty && setupAccountForm.password.$invalid) }">
              <label class="control-label" for="inputPassword">{{ 'setupAccount.password' | tr }}</label>
              <div class="control-label" ng-show="setupAccountForm.password.$dirty && setupAccountForm.password.$invalid">
                <small ng-show="setupAccountForm.password.$dirty && setupAccountForm.password.$invalid">{{ 'setupAccount.errorPassword' | tr }}</small>
              </div>
              <input type="password" class="form-control" ng-model="password" name="password" id="inputPassword" ng-pattern="/^.{8,}$/" required>
            </div>

            <div class="form-group" ng-class="{ 'has-error': (setupAccountForm.passwordRepeat.$dirty && (password !== passwordRepeat)) }">
              <label class="control-label" for="inputPasswordRepeat">{{ 'setupAccount.passwordRepeat' | tr }}</label>
              <div class="control-label" ng-show="setupAccountForm.passwordRepeat.$dirty && (password !== passwordRepeat)">
                <small ng-show="setupAccountForm.passwordRepeat.$dirty && (password !== passwordRepeat)">{{ 'setupAccount.errorPasswordNoMatch' | tr }}</small>
              </div>
              <input type="password" class="form-control" ng-model="passwordRepeat" name="passwordRepeat" id="inputPasswordRepeat" required>
            </div>

            <button class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="busy || setupAccountForm.$invalid || password !== passwordRepeat"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> {{ 'setupAccount.setupAction' | tr }}</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="layout-content" ng-show="view === 'invalidToken'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h2>{{ 'setupAccount.invalidToken.title' | tr }}</h2>
          <br/>
          <p>{{ 'setupAccount.invalidToken.description' | tr }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="layout-content" ng-show="view === 'done'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h2>{{ 'setupAccount.success.title' | tr }}</h2>
          <br/>
          <a href="/" class="btn btn-primary">{{ 'setupAccount.success.openDashboardAction' | tr }}</a>
        </div>
      </div>
    </div>
  </div>

  <footer class="text-center ng-cloak">
    <span class="text-muted" ng-bind-html="status.footer | markdown2html"></span>
  </footer>

</div>

</body>
</html>
