<div class="container col-lg-12 animate__animated animate__fadeIn">
  <div class="row justify-content-center">
    <div class="container">
      <br>
      <br>
      <br>
      <div class="row justify-content-center" *ngFor="let item of instance_list">
        <div class="col col-lg-6">
          <br>

          <div class="container" style="border: 1px solid #9bc0c0; border-radius: 3px;">
            <br>
            <small>
              <b style="padding-right: 15px;">SAVED: </b> {{ item['created_at'] }}
            </small>
            <span class="badge badge-pill badge-danger " style="float: right; cursor: pointer; color: #b55050;"
              (click)="delete_item(item)">
              <i class="small red close icon float-right" style="cursor: pointer"></i>
            </span>
            <br>
            <br>
            <div class="row text-center">
              <br>
              <div class="card">
                <div class="card-body animate__animated animate__fadeIn">
                  <span id="line1">
                    {{item['lines']['line1']}}
                  </span>
                </div>
              </div>
            </div>
            <br>
            <div class="row text-center">
              <br>
              <div class="card">
                <div class="card-body animate__animated animate__fadeIn">
                  <span id="line2">
                    {{item['lines']['line2']}}
                  </span>
                </div>
              </div>
              <br>
              <br>
            </div>
            <br>
            <div class="row text-center">
              <br>
              <div class="card">
                <div class="card-body animate__animated animate__fadeIn">
                  <span id="line3">
                    {{item['lines']['line3']}}
                  </span>
                </div>
              </div>
              <br>
              <br>
            </div>
            <br>
            <i class="small blue share alternate icon float-right" style="cursor: pointer; float:right"
              (click)="share_it(item['id'])"></i>
            <br>
            <br>
            <div class="ui fluid action input" *ngIf="shareIt && item['id'] == sharing_id" [id]="item['id']">
              <input type="text" placeholder=".."
                value="https://udohaiku.com/#/share/{{item['lines']['line_number1']}}/{{item['lines']['line_number2']}}/{{item['lines']['line_number3']}}"
                selected>
              <button class="ui button" (click)="copy_text(item['lines']['line_number1'], item['lines']['line_number2'], item['lines']['line_number3'])">COPY</button>
            </div>
            <br>

          </div>

          <br> <br>
        </div>
      </div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <div class="container-fluid text-center animate__animated animate__fadeIn" *ngIf="instance_list.length < 1">
        <h4>
          No Saved Instances Found.
        </h4>
        <br><br>
        <p routerLink="/ido" style="cursor: pointer">
          Go Save Some
        </p>
      </div>
    </div>
  </div>
</div>