<aura:component

implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:isUrlAddre
ssable" access="global" controller="CustomResponsesRelatedListController">
<aura:attribute name="showLoader" type="Boolean" default="false"/>
<aura:attribute name="mode" type="String" default="RelatedList"/>
<aura:attribute name="responses" type="list" default="[]"/>
<aura:attribute name="responsesToDisplay" type="list" default="[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="c:SECResponseEvent" action="{!c.doInit}" />
<lightning:navigation aura:id="navService"/>

<aura:if isTrue="{!v.mode == 'RelatedList'}">

<div class="articleSection">
<article class="slds-card">
<div class="slds-card__header slds-grid respHeader slds-theme_shade
slds-var-p-top_medium slds-var-p-bottom_medium" style="margin:0;">
<header class="slds-media slds-media_center slds-has-flexi-
truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-
contact" title="contact">
<lightning:icon iconName="standard:case" size="small"/>
<span class="slds-assistive-text">contact</span>
</span>
</div>
<div class="slds-media__body ">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-
link slds-truncate" title="Contacts (3)">
<span>Responses ({!v.responses.length > 3 ? '3+' :
v.responses.length})</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<lightning:buttonMenu alternativeText="Show menu"
iconSize="x-small" menuAlignment="right" onselect="{!c.handleMenuSelect}">
<lightning:menuItem value="Use Template or Clone"
label="Use Template or Clone" />
<lightning:menuItem value="New Custom Response"
label="New Custom Response" />
</lightning:buttonMenu>
</div>
</header>
</div>
<aura:if isTrue="{!v.showLoader}">
<div class="demo-only" style="height:6rem;position:relative">
<div role="status" class="slds-spinner slds-spinner_medium
slds-spinner_brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<aura:if isTrue="{!!v.showLoader}">
<aura:if isTrue="{!v.responsesToDisplay.length > 0}">
<div class="slds-card__body slds-card__body_inner">
<ul class="slds-grid slds-wrap slds-grid_pull-padded">
 <aura:iteration items="{!v.responsesToDisplay}"
var="resp">
<li class="slds-p-horizontal_small slds-size_1-of-1
slds-medium-size_1-of-1">
<article class="slds-tile slds-media slds-
card__tile slds-hint-parent">
<div class="slds-media__figure">
<span class="slds-icon_container slds-
icon-standard-contact" title="Description of icon when needed">
<lightning:icon
iconName="standard:case" size="small"/>
<span class="slds-assistive-
text">Contact</span>
</span>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-
spread slds-has-flexi-truncate">
<h3 class="slds-tile__title slds-
truncate" title="Related Record Title 1">
<!-- <a
href="javascript:void(0);" data-response15Id="{!resp.Id}" onclick="{!
c.gotoResponse15}">{!resp.Name}</a>-->
</h3>
<div class="slds-shrink-none">
<lightning:buttonMenu
alternativeText="Show menu" iconSize="x-small" menuAlignment="right" onselect="{!
c.handleRowSelect}">
<lightning:menuItem
value="{!'Edit-'+resp.Id}" label="Edit"/>
<lightning:menuItem
value="{!'Delete-'+resp.Id}" label="Delete"/>
</lightning:buttonMenu>
</div>
</div>
<div class="slds-tile__detail">
<dl class="slds-list_horizontal
slds-wrap">
<dt class="slds-item_label
slds-text-color_weak slds-truncate" title="Responses 1.5">Response Id:</dt>
<dd class="slds-item_detail
slds-truncate" title="{!resp.Responses_1_5__r.Name}">
<a
href="javascript:void(0);" data-newresponseId="{!resp.Responses_1_5__c}"
onclick="{!c.gotoNewResponse}">{!resp.Responses_1_5__r.Name}</a>
</dd>
<!-- <dt class="slds-item_label
slds-text-color_weak slds-truncate" title="File Number">File Number:</dt>
<dd class="slds-item_detail
slds-truncate" title="{!resp.File_Number__r.CaseNumber}">{!
resp.File_Number__r.CaseNumber}</dd> -->
<dt class="slds-item_label
slds-text-color_weak slds-truncate" title="File Number">Response Title:</dt>
<dd class="slds-item_detail
slds-truncate" title="{!resp.File_Number__r.CaseNumber}">{!
resp.Responses_1_5__r.Response_Title__c}</dd>
<dt class="slds-item_label
slds-text-color_weak slds-truncate" title="File Number">Approved:</dt>
<dd class="slds-item_detail
slds-truncate" title="{!resp.File_Number__r.CaseNumber}">{!
resp.Responses_1_5__r.Approved__c}</dd>
<dt class="slds-item_label
slds-text-color_weak slds-truncate" title="File Number">Created By:</dt>
<dd class="slds-item_detail
slds-truncate" title="{!resp.File_Number__r.CaseNumber}">
<a
href="javascript:void(0);" data-createdById="{!resp.CreatedById}" onclick="{!
c.gotoCreatedBy}">{!resp.CreatedBy.Name}</a>
</dd>

</dl>
</div>
</div>
</article>
</li>
</aura:iteration>
</ul>
</div>
<footer class="slds-card__footer">
<a class="slds-card__footer-action"
href="javascript:void(0);" onclick="{!c.viewAll}">View All
<span class="slds-assistive-text">Contacts</span>
</a>
</footer>
</aura:if>
</aura:if>
</article>
</div>
</aura:if>
<aura:if isTrue="{!v.mode == 'ViewAll'}">
<div class="articleSection">
<article class="slds-card">
<div class="slds-card__header slds-grid respHeader">
<header class="slds-media slds-media_center slds-has-flexi-
truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-
account" title="account">
<lightning:icon iconName="standard:case" size="small"/>
<span class="slds-assistive-text">Responses</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-
link slds-truncate" title="Responses">
<span>Responses
({!v.responsesToDisplay.length})</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<lightning:button label="Back" iconName="utility:back"
iconPosition="left" onclick="{!c.back}"/>
<lightning:button label="Use Template or Clone" title="Use
Template or Clone" onclick="{!c.handleTemplateClone}"/>
<lightning:button label="New Custom Response" title="New
Custom Response" onclick="{! c.handleNewTemplateResponse }"/>
 </div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner customCardBody">
<table aria-multiselectable="true" class="slds-table slds-
table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<!-- <th aria-label="File Number:" aria-sort="ascending"
class="slds-is-resizable slds-is-sortable slds-is-sorted slds-is-sorted_asc"
scope="col">
<span class="slds-truncate" title="File
Number:">File Number:</span>
</th> -->
<th aria-label="Response Title" aria-sort="none"
class="slds-is-resizable slds-is-sortable" scope="col">
<span class="slds-truncate" title="Response
Title">Response Title</span>
</th>
<th aria-label="Created By" aria-sort="none"
class="slds-is-resizable slds-is-sortable" scope="col">
<span class="slds-truncate" title="Created
By">Created By</span>
</th>
<th aria-label="Responses 1.5" aria-sort="none"
class="slds-is-resizable slds-is-sortable" scope="col">
<span class="slds-truncate" title="Responses
1.5">Response ID</span>
</th>
<th aria-label="Approved" aria-sort="none" class="slds-
is-resizable slds-is-sortable" scope="col">
<span class="slds-truncate"
title="Approved">Approved</span>
</th>
<th aria-label="Approved Date" aria-sort="none"
class="slds-is-resizable slds-is-sortable" scope="col">
<span class="slds-truncate"
title="Approved">Approved Date</span>
</th>
<th aria-label="Contact" aria-sort="none" class="slds-
text-align_center slds-is-resizable slds-is-sortable" scope="col">
<span class="slds-truncate"
title="Actions">Actions</span>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.responsesToDisplay}" var="resp">
<tr aria-selected="false" class="slds-hint-parent">
<!-- <th scope="row">
<div class="slds-truncate" title="{!
resp.File_Number__r.CaseNumber}">
<a href="javascript:void(0);" data-
newresponseId="{!resp.File_Number__c}" onclick="{!c.gotoNewResponse}"
tabindex="0">{!resp.File_Number__r.CaseNumber}</a>
</div>
</th> -->
<td role="gridcell">
<div class="slds-truncate" title="{!
resp.Responses_1_5__r.Response_Title__c}">{!
resp.Responses_1_5__r.Response_Title__c}</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="{!
resp.CreatedBy.Name}">
<a href="javascript:void(0);" data-
createdById="{!resp.CreatedById}" onclick="{!c.gotoCreatedBy}">{!
resp.CreatedBy.Name}</a>
</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="{!
resp.CreatedBy.Name}">
<a href="javascript:void(0);" data-
newresponseId="{!resp.Responses_1_5__c}" onclick="{!c.gotoNewResponse}">{!
resp.Responses_1_5__r.Name}</a>
</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="{!
resp.Responses_1_5__r.Approved__c}">{!resp.Responses_1_5__r.Approved__c}</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="{!
resp.Responses_1_5__r.Approved__c}">
<lightning:formatteddatetime value="{!
resp.Responses_1_5__r.Date_Approved__c}"

year="numeric"

month="numeric"

day="numeric">
</lightning:formatteddatetime>
</div>
</td>
<td role="gridcell" class="slds-text-align_center">
<lightning:buttonMenu alternativeText="Show
menu" iconSize="x-small" menuAlignment="right" onselect="{!c.handleRowSelect}">
<lightning:menuItem
value="{!'Edit-'+resp.Id}" label="Edit"/>
<lightning:menuItem
value="{!'Delete-'+resp.Id}" label="Delete"/>
</lightning:buttonMenu>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</article>
</div>
</aura:if>
<c:SECResponseCreation aura:id="SECResponseCreation"/>
</aura:component>
.THIS .respHeader {
border: 1px solid #d1d1d1 !important;
border-radius: 5px !important;
padding: 12px 11px !important;
}
.THIS.articleSection{
margin: 0px 12px !important;
border: 1px solid #b1b1b1 !important;
border-radius: 5px 5px 5px 5px !important;
}
.THIS .customCardBody{
padding: 0px !important;
border: 1px solid #b1b1b1;
margin: 5px 12px;
/* border-radius: 5px;*/
}