<aura:component controller="ContactList" implements="force:appHostable,flexipage:availableForAllPageTypes">

    <!-- ATTRIBUTES -->
    <aura:attribute name="contacts" Type="List"/>
    <aura:attribute name="filterName" Type="String"/>

    <aura:handler name="change" value="{!v.contacts}" action="{!c.search}"/>
    <!-- /ATTRIBUTES -->

    <!-- CARD -->
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">Search Contacts</h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <ui:inputText class="field" label="Search Keyword" keyup="{!c.search}" aura:id="search" value="{!v.filterName}" updateOn="keyup"/>
            <br/>
            <table class='slds-table slds-table_bordered'>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Account Name</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.contacts}" var="contact">
                        <tr>
                            <td>{!contact.Name}</td>
                            <td>{!contact.Account.Name}</td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </article>
    <!-- /CARD -->

</aura:component>