<div class="container-fluid">
    <div class="row">
        <h1>Accrual Info</h1>
        <p>
            <span v-if="isView">
                <a @@click.prevent="editClick">edit...</a>
            </span>
            <span v-else>
                <a @@click.prevent="doneClick">done...</a>
                <a @@click.prevent="discardClick" class="pull-right">discard...</a>
            </span>
        </p>
        <div class="form-group">
            <label class="control-label">Name</label>
            <p v-if="isView" class="form-control-static">{{ accrual.name }}</p>
            <p v-else><input type="text" class="form-control" name="accrual-name" v-model="edit.name" maxlength="100" /></p>
        </div>
        <div class="form-group">
            <label class="control-label">Accrual Rate</label>
            <p v-if="isView" class="form-control-static">{{ accrual.accrualRate }}</p>
            <p v-else><input type="number" class="form-control" name="accrual-rate" v-model="edit.accrualRate" /></p>
        </div>
        <div class="form-group">
            <label class="control-label">Hourly Rate</label>
            <p v-if="isView" class="form-control-static">{{ accrual.hourlyRate ? "$" + accrual.hourlyRate.toFixed(2) : "$15.00" }}</p>
            <p v-else><input type="number" class="form-control" name="hourly-rate" v-model="edit.hourlyRate" /></p>
        </div>
        <div class="form-group">
            <label class="control-label">Min Hours</label>
            <p v-if="isView" class="form-control-static">{{ accrual.minHours }}</p>
            <p v-else><input type="number" class="form-control" name="min-hours" v-model="edit.minHours" /></p>
        </div>
        <div class="form-group">
            <label class="control-label">Max Hours</label>
            <p v-if="isView" class="form-control-static">{{ accrual.maxHours }}</p>
            <p v-else><input type="number" class="form-control" name="min-hours" v-model="edit.maxHours" /></p>
        </div>
        <div class="form-group">
            <label class="control-label">Starting Date</label>
            <p v-if="isView" class="form-control-static">{{ accrual.startingDate }}</p>
            <p v-else><input type="date" class="form-control" name="starting-date" v-model="edit.startingDate" /></p>
        </div>
        <div class="form-group">
            <label class="control-label">Last Modified</label>
            <p class="form-control-static">{{ accrual.lastModified }}</p>
        </div>
    </div>

    <div class="row" v-if="environment.name === 'Development'">
        <pre v-if="!isView">{{this.$data}}</pre>
    </div>    
</div>