<div id="propertyMaster">
    <div class="row border-bottom border-primary" id="headerRow">
        <div class="col-1 d-flex align-items-center"><label>ID</label></div>
        <div class="col-4 d-flex align-items-center"><label>Title</label></div>
        <div class="col-5 d-flex align-items-center"><label>City</label></div>
        <div class="col-2 d-flex align-items-center">
            <button id="btnNew" type="button" class="btn btn-outline-primary">
                <i class="fas fa-plus" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div>
        {{#each properties}}

        <div class="row">
            <div class="col-1 d-flex align-items-center">{{id}}</div>
            <div class="col-4 d-flex align-items-center">{{title}}</div>
            <div class="col-3 d-flex align-items-center">{{city}}</div>
            <div class="col-2 d-flex align-items-center mr-4">{{price}}</div>
            <div class="d-flex text-primary">
                <a href="/property.html?propertyId={{id}}" data-route-link><div id="v{{id}}" class="propertyDetailButtons viewButton"><i class="fas fa-eye"></i>&nbsp;</div></a>
                <a href="/property-management.html?propertyId={{id}}" data-route-link><div id="e{{id}}" class="propertyDetailButtons editButton">&nbsp;<i class="fas fa-edit"></i>&nbsp;</div></a>
                <div id="d{{id}}" class="propertyDetailButtons deleteButton">&nbsp;<i class="fas fa-trash"></i></div>
            </div>
        </div>
        {{/each}}


    </div>
</div>