<aura:component controller="CasesController">
<aura:attribute name="cases" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<!-- Lightning Design Card -->
<div class="slds">
<div class="slds-card slds-m-right--small">
    <div class="slds-card__header slds-grid">
        <div class="slds-media slds-media--center slds-has-flexi-truncate">
            <div class="slds-media__figure">
                <c:svg ariaHidden="true"
                       xlinkHref="/resource/SLDS103/assets/icons/standard-sprite/svg/symbols.svg#case"
                       class="slds-icon slds-icon-standard-case slds-icon--small"
                />
            </div>
            <div class="slds-media__body">
                <h2 class="slds-text-heading--small slds-truncate">Cases</h2>
            </div>
        </div>
        <div class="slds-no-flex">
                <c:button class="slds-button--icon-border-filled"
                      svgXlinkHref="/resource/SLDS103/assets/icons/utility-sprite/svg/symbols.svg#chart"
                      svgClass="slds-button__icon"
                      onclick="{!c.showCharts}"
                      />
        </div>
        <div class="slds-no-flex">
            <div class="slds-button-group">
                <button class="slds-button slds-button--neutral slds-button--medium slds-m-right--medium"
                        onclick="{!c.showDetails}"
                        data-data="">Export
                </button>
            </div>
        </div>
        <div class="slds-no-flex">
            <div class="slds-button-group">
                <button class="slds-button slds-button--brand slds-button--medium"
                        onclick="{!c.showNewCase}"
                        data-data="">New
                </button>
            </div>
        </div>
    </div>
    <div class="slds-card__body slds-scrollable--y custom-card">
        <table class="slds-table slds-table--bordered slds-table--striped slds-max-medium-table--stacked-horizontal">
            <thead>
                <tr>
                    <th class="slds-is-sortable" scope="col">
                        <div class="slds-truncate">Case
                            <button class="slds-button slds-button--icon-bare">
                                <c:svg ariaHidden="true"
                                       xlinkHref="/resource/SLDS103/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"
                                       class="slds-button__icon slds-button__icon--small"
                                       />
                                <span class="slds-assistive-text">Sort</span>
                            </button>
                        </div>
                    </th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Account Name</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Priority</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Status</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Subject</span></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.cases}" var="case">
                    <tr>
                        <td><a href="#" onclick="{!c.showDetails}" data-data="{!case.Id}">{!case.CaseNumber}</a></td>
                        <td>{!case.Account.Name}</td>
                        <td>{!case.Priority}</td>
                        <td>{!case.Status}</td>
                        <td>{!case.Subject}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</div>
</aura:component>