import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Template } from '../../../models';
@Component({
selector: 'app-template-actions',
templateUrl: './template-actions.component.html',
styleUrls: ['./template-actions.component.css']
})
export class TemplateActionsComponent implements OnInit {
@Input() template: Template;
@Input() showEdit: boolean;
@Output() closeAccountOptions = new EventEmitter();
@Output() deleteTemplate = new EventEmitter<string>();
constructor() {}
ngOnInit() {
}
// todo rename to toggleActions
hideActionOptions() {
this.closeAccountOptions.emit();
}
showDelete() {
this.deleteTemplate.emit(this.template.id);
}
}
<div class="overlay">
<div class="pop-up-ctn" id="templateAccountOptions">
<div class="close-ctn">
<a id="closeButton" (click)="hideActionOptions()">
<i class="material-icons">close</i>
</a>
</div>
<div class="pop-up-ctn-header">
<p class="header-text">{{template.name}}</p>
</div>
<div class="pop-up-ctn-body text-left">
<div *ngIf="template.isMicroDepositVerificationPending && !template.isFrozen" class="template-option" [routerLink]="['/verify', template.id]">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 29.3" style="enable-background:new 0 0 24 29.3;" xml:space="preserve" class="verify">
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #707173;
}
</style>
<path class="st0" d="M0,0h24v29.3H0V0z" />
<path class="st1" d="M20.8,2.2L8.5,14.5L3.2,9.4L0,12.6L8.4,21L24,5.4C24,5.4,20.8,2.2,20.8,2.2z" />
<path class="st1" d="M24,23.7l-24,0l0,3.6l24,0C24,27.2,24,23.7,24,23.7z" />
</svg>
Verify Account</p>
</div>
<div *ngIf="showEdit" class="template-option" [routerLink]="['/templates', template.id]">
<p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" class="detail">
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #707173;
}
</style>
<path class="st0" d="M0,0h24v24H0V0z" />
<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M14,18h-4v-7h4V18z M14,9h-4V6h4V9z" />
</svg> Account Details
</p>
</div>
<div id="deleteAccountButton" class="template-option" *ngIf="!template.needsVerified" (click)="showDelete()">
<p>
<!-- Delete Template SVG -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" class="delete-account">
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #717274;
}
.st2 {
fill: #FFFFFF;
}
</style>
<path class="st0" d="M0,0h24v24H0V0z" />
<path class="st1" d="M4,10v7h3v-7H4z M10,10v7h3v-7H10z M2,22h19v-3H2V22z M16,10v7h3v-7H16z M11.5,1L2,6v2h19V6L11.5,1z" />
<polygon class="st1" points="1,2.4 0,4 21.9,17.7 23,16 " />
<polygon class="st2" points="2,0.7 1,2.3 22.9,16.1 24,14.4 " />
</svg>
Delete Account</p>
</div>
<!-- <div class="template-option" [routerLink]="['/start', template.id]">
<p>
<i class="material-icons email-icon">email</i> Send Money To Account</p>
</div> -->
</div>
</div>
</div>