<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="onBack()">
      <ion-button>
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <!--      <ion-button>-->
      <!--        <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
      <!--      </ion-button>-->
    </ion-buttons>
    <ion-title>My Files</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
<!--  <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/p3.jpg)'">-->
<!--    <div class="ion-padding">-->
<!--&lt;!&ndash;      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>&ndash;&gt;-->
<!--    </div>-->
<!--  </div>-->
  <div class="boxed_contents">

    <div class="ion-padding">

      <div class="flex">
        <ion-label class="bold_text" style="margin-bottom: 10px;">My Files</ion-label>
        <!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
      </div>

      <ion-accordion-group>
        <ion-accordion value="first" style="border-radius: 10px">
          <ion-item slot="header" color="secondary">
            <ion-label>Add New File(s)</ion-label>
          </ion-item>
          <div class="ion-padding" slot="content">

            <ion-card style="margin: 0px;">
              <ion-card-content  style="padding: 1px;">
                <div style="margin-bottom: 5px;">
                  <ion-input style="background-color: aliceblue;"
                             maxlength="20" [(ngModel)]='title'
                             label="Input with placeholder"
                             (ionChange)="inVerify()"
                             placeholder="Item Name"></ion-input>
                </div>
                <ion-textarea
                        (ionChange)="inVerify()"
                        maxlength="35" [(ngModel)]='description'
                        style="background-color: aliceblue; margin: 0px; min-height: 80px"
                        label="File description ..."
                        placeholder="Enter detail description"
                        [(ngModel)]='yourmessage' ></ion-textarea>
              </ion-card-content>
              <ion-grid>
                <ion-row>
                  <ion-col>

                  </ion-col>

                  <ion-col style="text-align: right;">
                    <ion-button fill="outline"   [disabled]="isDisabled"  color="secondary" (click)="startCamera(100)">
                      <ion-icon slot="icon-only" name="camera-reverse-outline"></ion-icon>
                    </ion-button>
                    <ion-button fill="outline"  [disabled]="isDisabled" style="margin-left: 10px;" (click)="startCamera(0)">
                      <ion-icon slot="icon-only" name="folder-outline"></ion-icon>
                    </ion-button>
                  </ion-col>

                </ion-row>
              </ion-grid>

              <ion-label class="description">{{interest_msg_status}}
              </ion-label>
            </ion-card>



          </div>
        </ion-accordion>

      </ion-accordion-group>


<!--      <ion-segment class = "common_segment" [(ngModel)]="tabs">-->
<!--        <ion-segment-button value="myfiles">-->
<!--          <ion-label>My Files</ion-label>-->
<!--        </ion-segment-button>-->
<!--        <ion-segment-button value="uploadnew">-->
<!--          <ion-label>Add New</ion-label>-->
<!--        </ion-segment-button>-->
<!--      </ion-segment>-->

<!--      https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1/getmedia/session_id/myfile/file_uid-->

<!--      <div *ngIf="tabs =='myfiles'" class="lesson">-->

      <div  class="lesson">

        <div class="video" *ngFor="let item of myFilesData">
          <div class="left">
            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>

            <div class="text">
              <ion-label class="bold_text">{{item.title}}</ion-label>
              <ion-label class="grey_text">{{item.description}}</ion-label>
              <ion-label class="grey_text"><a href="{{session_image_server}}{{curr_session}}/myfile/{{item.file_uid}}">{{item.file_name}}</a></ion-label>
            </div>
          </div>
          <div class="right">
            <a href="{{session_image_server}}{{curr_session}}/myfile/{{item.file_uid}}"><ion-icon name="arrow-down"></ion-icon></a>
          </div>
        </div>

      </div>

      <div *ngIf="tabs =='uploadnew'" class="lesson">



      </div>

    </div>
  </div>

</ion-content>

<!--<ion-footer>-->
<!--  <ion-toolbar>-->
<!--    <div class="button" (click)="onBack()">-->
<!--      <ion-label class="text">Return</ion-label>-->
<!--    </div>-->
<!--  </ion-toolbar>-->
<!--</ion-footer>-->
