<div class="review-page row" [ngClass]="{'remove-extra': LostService.openPayment}">
  <div class="col l6 push-l3 s12" [hidden]="LostService.savedSuccess && LostService.savedImgs || LostService.openPayment">
    <div class="centered zise" [hidden]="!LostService.dogPicture" (click)="LostService.goTo(LostService.sequence.length-2)">
      <div  class="profile-dog" [ngStyle]="{'background-image': 'url(' + LostService.dogPicture + ')' }">
        <div class="overlay"><a>Editar</a></div>
      </div>
    </div> 
    <ul class="collection with-header">
      <li class="collection-header avatar"  [hidden]="!LostService.dogName"><h5>{{LostService.dogName}}</h5><a  class="secondary-content" (click)="LostService.goTo(LostService.sequence.length-3)">Editar</a></li>
      <li class="collection-item avatar centered" [hidden]="LostService.parentPage!=='lost'">
        <div class="circle material-icons location"><i class="medium material-icons">attach_money</i></div>
        <span class="title"><b>Recompensa:</b> $ {{LostService.reward}} MXN*</span>
        <a class="secondary-content" (click)="LostService.goTo(LostService.sequence.length-2)">Editar</a>
      </li>
      <li class="collection-item avatar centered" *ngFor="let description of LostService.displayedSequence; let i=index">
        <div class="circle material-icons location" [hidden]="LostService.sequence[i]!=='location'"><i class="medium material-icons">location_on</i></div>
        <div class="circle material-icons location" [hidden]="LostService.sequence[i]!=='date'"><i class="medium material-icons">date_range</i></div>
        <div  style="margin: 0" *ngIf="pageAnswersCopy[i] && window.Array.isArray(pageAnswersCopy[i]) && pageAnswersCopy[i][0] && LostService.sequence[i]!=='pattern'">
          <div  class="circle" *ngFor="let imgUrl of pageAnswersCopy[i][0].imgUrls; let j=index" [ngStyle]="{'background-image': 'url(' + imgUrl+ ')' , 'left':  imgwidth*j + 'px', 'background-color': pageAnswersCopy[i][0].names[j].charAt(0)==='#' && pageAnswersCopy[i][0].names[j]}"></div>
        </div>
        <div class="circle " *ngIf="LostService.sequence[i]==='pattern' && pageAnswersCopy[i] && pageAnswersCopy[i][0] && pageAnswersCopy[i][0].names.length > 1" style="margin: 0">
          <dog-figure [display]="pageAnswersCopy[i][0].names"></dog-figure>
        </div>
        <div class="circle" [ngStyle]="{'background-image': 'url(' + pageAnswersCopy[i].imgUrl + ')' }" *ngIf="pageAnswersCopy[i] && !LostService.sequence[i].imgUrl"></div>
        <span class="title" [ngStyle]="{'padding': window.Array.isArray(pageAnswersCopy[i]) && pageAnswersCopy[i][0] && '0 155px' }"><b>{{description}}: </b>
          <span [hidden]="!(LostService.sequence[i]==='date')"> {{pageAnswersCopy[i]}}</span>
          <span [hidden]="!(pageAnswersCopy[i] && LostService.sequence[i]==='location')"> {{pageAnswersCopy[i].address}}</span>
          <span [hidden]="!(pageAnswersCopy[i] && LostService.sequence[i]!=='location' && LostService.sequence[i]!=='date' && !window.Array.isArray(pageAnswersCopy[i]))"> {{pageAnswersCopy[i].name}}</span>
          <span *ngIf="pageAnswersCopy[i] && window.Array.isArray(pageAnswersCopy[i]) && pageAnswersCopy[i][0]">{{ '' + pageAnswersCopy[i][0].labels}}</span>
        </span>
        <a class="secondary-content" (click)="LostService.goTo(i)">Editar</a>
      </li>
      <li class="collection-item avatar centered" [hidden]="!LostService.comments">
        <div class="circle material-icons location"><i class="medium material-icons">comment</i></div>
        <span class="title"><b>Comentarios:</b>  {{LostService.comments}} </span>
        <a class="secondary-content" (click)="LostService.goTo(LostService.sequence.length-2)">Editar</a>
      </li>      
    </ul>
    <button class="waves-effect btn action submit" [disabled]="LostService.loadingSave">
      <div [hidden]="!(LostService.parentPage==='lost' && !LostService.loadingSave)" (click)="toPaymentForm()">Si! es mi perro<i class="material-icons right">send</i></div>
      <div [hidden]="!(LostService.parentPage==='found' && !LostService.loadingSave)" (click)="LostService.saveToApi()">Si!  es el perro<i class="material-icons right">send</i></div>
      <div [hidden]="!(LostService.loadingSave && !LostService.savedImgs)">Carngado ...</div>
    </button>
    <div class="row" style="color: white; text-align: center;padding-top: 30px" [hidden]="LostService.reward === LostService.defaultReward"><p>*Si tu perro es econtrado recuerda que el <b>20%</b> de la recompensa es para Lost Dog</p></div>
  </div>
  <div class="col l12 m12 s12 " *ngIf="LostService.savedSuccess && LostService.savedImgs">
    <div class="row text-centered">
      <a  class="size-increase-mobile" [hidden]="!LostService.savedData.lost" (click)="router.navigateByUrl('/dog/?id=' + LostService.savedData._id);">Ver página generada <i class="material-icons" style="vertical-align: bottom;cursor: pointer;">chevron_right</i></a>
    </div>
    <div class="row centered">
      <dog-card  [atReviewPage]="true"  [data]="LostService.savedData"  [maxCards]="1" [cardIndex]="0"></dog-card>
    </div>
  </div>
  <div class="col l10 push-l1 s12" *ngIf="LostService.openPayment">
  <ul id="extra-info" class="collapsible popout"  #Description>
    <li>
      <div class="row collapsible-header">
        <div class="col l2 s3 m3">
             <div class="circle" style="top: 6px;" [ngStyle]="{'background-image': 'url(' + LostService.dogPicture + ')' }" ></div>
        </div>
        <div class="col l8 s8 m8">
          <h5 class="row main-title">
            <span class="title-main col l6" [ngClass]="{'row': mobile}">{{paymentDesc}}</span>
            <span class="unit money col l3" [ngClass]="{'row full-width': mobile}"> $ {{baseCost}}.00 MXN</span>
            <span class="col l3 push-l1 create-account" [ngClass]="{'row full-width': mobile}"><button class="waves-effect btn info" (click)="LostService.openPayment=false">Editar</button></span>
          </h5>
        </div>    
        <div class="col l2 s1 m1">
          <div class="input-field alt-black main-check to-right">
            <input type="checkbox" name="facebook ads" id="fb-report"  checked="checked">
              <label for="fb-report"> </label>
          </div>          
        </div>
      </div>
      <div class="row collapsible-body">
        <div class=" col l8 push-l2" [ngClass]="{'row full-width': mobile}">
          <div class="row text-centered">
            <p class="heavy" style="color: white;">Tu pago incluye alta visibilidad en el sitio web de Lost Dog por 6 meses</p>
          </div>
          <div class="row centered">
            <div class="circle centered small">
                <h4>+</h4>
            </div>            
          </div>
          <div class="row text-centered">
            <div class="heavy all-inline" style="color: white;">
              <p>Un anuncio digital durante </p> <h5>{{fbService.defaultDuration}} día</h5> <p> con un alcance de </p> <h5> {{fbService.initialReach}} personas.</h5>
            </div>
            <p style="color: white;">Puedes incrementar la duración y el alcance al <b>configurar</b> tu anuncio digital.</p>
          </div>
        </div>
        <div class="col l2 push-l2" [ngClass]="{'row full-width centered': mobile}">
          <div class="circle big centered">
            <div class="content text-centered">
              <p style="font-weight: bolder;">Alcance: </p>
              <h4>{{fbService.initialReach}} <span class="ast">*</span></h4>
              <p>Personas / día</p>
            </div>
          </div>
          <p class="subs">* Estimación generada por <b>Facebook</b></p>
        </div>
      </div>
    </li>
  </ul>
    <facebook-ads [replaceVals]="exportAds" (added)="setOnlyBase($event)"></facebook-ads>
  </div>
</div>
