<aura:component controller="ExpensesController" >  

    <!--aura:attribute for the component -->
	<aura:attribute name="newExpenses" type="Expense__c" />
    
    <!--A component registers that it may fire an event 
        by using <aura:registerEvent> in its markup. -->
    
    <aura:registerEvent name="updateExpense" type="c.expensesItemUpdate"/>
    
	<aura:attribute name="newExpense" type="Expense__c"
         		          default="{'sobjectType': 'Expense__c',
                                  'Name': '',
                                  'Amount__c': 0,
                                  'Client__c': '',
                                  'Date__c': '',
                                  'Reimbursed__c': false }" />
    
    <aura:attribute name="expenses" type="Expense__c[]" />
    
    
    
        <!-- handles the "init event" which is the action, {!c.doInit} -->
	<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
     
       <!--action handler controller in this component: JS -->
       <aura:handler name="updateExpense" event="c:expensesItemUpdate"
        action="{!c.handleUpdateExpense}"/>

    
 <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="MyExpenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem class="container" padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Expenses</h1>
                <h2 class="slds-text-heading--medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
<!-- / PAGE HEADER END -->
    
    
    <!-- NEW EXPENSE FORM -->
    	<lightning:layout>
        <lightning:layoutItem flexibility="auto" padding="around-small" size="6">
            
    <!-- The div for the form: CREATE NEW EXPENSE -->
    	<div aria-labelledby="newexpenseform">
        
    <!-- Fieldset: BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="newexpenseform" class="slds-text-heading--medium 
          	slds-p-vertical--medium">
          	Add Expense
        </legend>
  
            
        <!-- Form: CREATE NEW EXPENSE FORM -->
            
        <form class="slds-form--stacked  slds-input">          
            <lightning:input aura:id="expenseform" placeholder="Expense type"   
              label="Expense"
                             name="expensename"
                             value="{!v.newExpense.Name}"
                             required="true"/> 
            
            <lightning:input type="number" aura:id="expenseform" label="Amount"
                             name="expenseamount"
                             min="0.1"
                             formatter="currency"
                             step="0.01"
                             value="{!v.newExpense.Amount__c}"
                             messageWhenRangeUnderflow="Enter an amount that's at least 
                            $0.10."/>
           
            <lightning:input aura:id="expenseform" label="Client"
                             name="expenseclient"
                             value="{!v.newExpense.Client__c}"
                             placeholder="Clients Name"/>
            
            
            <lightning:input type="date" aura:id="expenseform" label="Expense Date" 
                             placeholder="dd/mm/yyyy"
                             pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}"
                             name="expensedate"
                             value="{!v.newExpense.Date__c}"/>
            
            <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"  
                             name="expreimbursed"
                             checked="{!v.newExpense.Reimbursed__c}"/>
            
            <lightning:button label="Create Expense" 
                              class="slds-m-bottom--small"
                              variant="brand"
                              onclick="{!c.clickCreate}"/> <!--controller call-->
       </form>
   </fieldset>
</div>
   			 <!-- / CREATE NEW EXPENSE -->
        		</lightning:layoutItem>
    				</lightning:layout>
    		<!-- / NEW EXPENSE FORM -->
    
    
    <!-- Adding component: expensesList.cmp -->
   		<c:expensesList/>

  </aura:component>