<ion-header>
  <ion-toolbar>
    <ion-title>Interviste</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
  <ion-menu side="start" menu-id="topics">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Topics</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button expand="block" (click)="createNewTopics()">Crea nuovo Topic</ion-button>
      <ion-list *ngFor="let topic of topics; trackBy: trackByDoc">
        <ion-item (click)="apriTopic(topic.idRichiesta)">{{topic.titolo}}</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <div class="ion-page" main>
      <ion-content padding>
  <ion-grid align-items-center>
      <ion-row>
        <ion-button expand="block" (click)="openSideMenu()">Visualizza Elenco Topics</ion-button>
      </ion-row>
      <ion-row *ngIf="platform.is('desktop') && topicAttivo.titolo != null"> 
          <ion-col>
            <ion-grid>
              <ion-row text-center center>
                <ion-col>
                  <ion-label floating>Da:</ion-label>
                </ion-col>
                <ion-col>
                  <input type="date" name="calendar" [(ngModel)]="date1">
                </ion-col>
                <ion-col>
                  <ion-label floating>A:</ion-label>
                </ion-col>
                <ion-col>
                  <input type="date" name="calendar" [(ngModel)]="date2">
                </ion-col>
                <ion-col>
                  <ion-button color="light" (click)="caricaTopic()">Cerca</ion-button>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
          <ion-col></ion-col>
        </ion-row>
    <ion-row *ngIf="!platform.is('desktop') && topicAttivo.titolo != null">
      <ion-col>
        <ion-grid>
          <ion-row text-center center>
            <ion-col>
              <ion-label floating>Da:</ion-label>
            </ion-col>
            <ion-col>
              <ion-icon name="calendar" (click)="setDateDa()"></ion-icon> 
            </ion-col>
            <ion-col>
              {{date1}}
            </ion-col>
            <ion-col>
              <ion-label floating>A:</ion-label>
            </ion-col>
            <ion-col>
                <ion-icon name="calendar" (click)="setDateA()"></ion-icon>
            </ion-col>
            <ion-col>
              {{date2}}
            </ion-col>
            <ion-col>
              <ion-button color="light" (click)="caricaTopic()">Cerca</ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
      <ion-col></ion-col>
    </ion-row>
    </ion-grid>
    
      

  <div>
    <h2>{{topicAttivo.titolo}}</h2>
    <div id="content">
      <ion-item lines="full" *ngIf="topicAttivo.testo != null">
        <!--<div class="chat-status" text-right >
          <span class="chat-date">{{topicAttivo.data}}</span>
          <span class="chat-content-center">{{topicAttivo.testo}}</span>
        </div>-->
        <div #message class="message">
          <div class="chat-message" text-right>
            <div class="right-bubble">
              <span class="msg-name">Me </span>
              <span class="msg-date">{{topicAttivo.data}}</span>
              <p text-wrap>{{topicAttivo.testo}}</p>
            </div>
          </div>
        </div>
      </ion-item>
      <ion-list *ngFor="let intervento of topicAttivo.interventi;">
        <ion-item lines="full" *ngIf="intervento.utente == null">
          <!--<div class="chat-status" text-right >
            <span class="chat-date">{{intervento.data}}</span>
            <span class="chat-content-center">{{intervento.testo}}</span>
          </div>-->
          <div #message class="message">
            <div class="chat-message" text-right>
              <div class="right-bubble">
                <span class="msg-name">Me </span>
                <span class="msg-date">{{intervento.data}}</span>
                <p text-wrap>{{intervento.testo}}</p>
              </div>
            </div>
          </div>
        </ion-item>
        <ion-item lines="full" *ngIf="intervento.utente != null">
          <!--<div class="chat-status" text-left>
            <span class="chat-date">{{intervento.data}}</span>
            <span class="chat-content-center">{{intervento.testo}}</span>
          </div>-->
          <div #message class="message">
             <div class="chat-message" text-left>
              <div class="left-bubble">
                <span class="msg-name">{{intervento.utente}}</span>
                <span class="msg-date">{{intervento.data}}</span>
                <p text-wrap>{{intervento.testo}}</p>
              </div>
            </div>
          </div>
        </ion-item>
      </ion-list>
    </div>
  </div>
  </ion-content>
    

    <ion-footer [hidden]="topicAttivo.titolo == null">
      <form #form="ngForm"> 
        <ion-grid>
          <ion-row>
            
              <ion-col col-10>
                <ion-input id= "message" type="text" placeholder="Digita un messaggio" name="message" [(ngModel)]="message"></ion-input> 
              </ion-col>
              <ion-col col-2>
                <ion-icon name="paper-plane" (click)="aggiungiIntervento(form)"></ion-icon>
              </ion-col>
              
          </ion-row>
        </ion-grid>
      </form>
    </ion-footer>
 
  
</div>
  <div id="modal"></div>
  <div id="content"></div>
</ion-content>


