<h2>Owner Information</h2>

<table class="table table-striped">
    <tr>
        <th class="col-sm-3">Name</th>
        <td><b>{{$ctrl.owner.firstName}} {{$ctrl.owner.lastName}}</b></td>
    </tr>
    <tr>
        <th>Address</th>
        <td>{{$ctrl.owner.address}}</td>
    </tr>
    <tr>
        <th>City</th>
        <td>{{$ctrl.owner.city}}</td>
    </tr>
    <tr>
        <th>Telephone</th>
        <td>{{$ctrl.owner.telephone}}</td>
    </tr>
    <tr>
        <td>
            <a class="btn btn-info" href="#!/owners/{{$ctrl.owner.id}}/edit">Edit Owner</a>
        </td>
        <td>
            <a href="#!/owners/{{$ctrl.owner.id}}/new-pet" class="btn btn-success">Add New Pet</a>
        </td>
    </tr>
</table>

<h2>Pets and Visits</h2>

<table class="table" style="width:600px;">
    <tr ng-repeat="pet in $ctrl.owner.pets">
        <td valign="top" style="width: 120px;">
            <dl class="dl-horizontal">
                <dt>Name</dt>
                <dd>{{pet.name}}</dd>
                <dt>Birth Date</dt>
                <dd>{{pet.birthDate | date:'MM/dd/yyyy'}}</dd>
                <dt>Type</dt>
                <dd>{{pet.type.name}}</dd>
            </dl>
        </td>
        <td valign="top">
            <table class="table-condensed">
                <thead>
                <tr>
                    <th>Visit Date</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tr ng-repeat="visit in pet.visits">
                    <td>{{visit.date | date:'MM/dd/yyyy'}}</td>
                    <td>{{visit.description}}</td>
                </tr>
                <tr>
                    <td>
                        <a href="#!/owners/{{$ctrl.owner.id}}/pets/{{pet.id}}">Edit Pet</a>
                    </td>
                    <td>
                        <a href="...">Add Visit</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>