<div class="row">
  <div class="col-xl-8 offset-xl-2">
    <div class="card">
      <div class="card-body">
        <h1 class="card-title">Serveur Minecraft</h1>
        <div>
          Status du serveur :
          <span *ngIf="!serverStartedChecked" class="badge badge-warning">
            Vérification
          </span>
          <span *ngIf="serverStartedChecked" class="badge"
              [ngClass]="serverStarted ? 'badge-success' : 'badge-danger'">
            {{serverStarted ? 'Démarré' : 'Éteint'}}
          </span>
        </div>
        <div>
          Adresse du serveur de jeu :
          <span id="serverAddress"
              class="badge light-blue"
              (click)="copyToClipBoard()"
              mdbTooltip="Cliquez pour copier l'adresse"
              placement="top">
            {{serverAddress}}
          </span>
          <span id="copiedMsg" style="display: none" class="badge badge-pill indigo">
            Copié !
          </span>
        </div>
        <div style="text-align:center; margin-top: 15px;" *ngIf="isAuthenticated()">
          <button mdbBtn
              *ngIf="serverStarted"
              type="button"
              class="waves-light indigo btn-rounded"
              [disabled]="restarting"
              (click)="restartServer()"
              mdbWavesEffect>
            <i class="fa fa-refresh"></i>&nbsp;
            Redémarrer
          </button>
          <button mdbBtn
              type="button"
              class="waves-light btn-rounded"
              [ngClass]="serverStarted ? 'red' : 'green'"
              [disabled]="restarting"
              (click)="startOrStopServer()"
              mdbWavesEffect>
            <i class="fa" [ngClass]="serverStarted ? 'fa-stop-circle' : 'fa-play-circle'"></i>&nbsp;
            {{serverStarted ? 'Éteindre' : 'Démarrer'}}
          </button>
          <div id="errorMsg" class="msg card red lighten-2 text-center z-depth-2">
            <div class="card-body">
              <p class="white-text mb-0">{{errorMsg}}</p>
            </div>
          </div>
          <div id="warnMsg" class="msg card orange lighten-2 text-center z-depth-2">
            <div class="card-body">
              <p class="white-text mb-0">{{warnMsg}}</p>
            </div>
          </div>
          <div id="successMsg" class="msg card green lighten-2 text-center z-depth-2">
            <div class="card-body">
              <p class="white-text mb-0">{{successMsg}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>