<div class="container">
    <h2 class="my-5">
        <div class="row">
            <div class="col-1" onclick="wifi.hide()">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="col-10">
                Wifi
            </div>
            <div class="col-1" onclick="wifi.show()">
                <i class="fas fa-sync"></i>               
            </div> 
        </div>
    </h2>
    <div class="list-group scrollable">
        {{ #devices }}
            <div class="row border-bottom py-3 list-group-action">
                <div class="col-1">
                    <i class="fas fa-wifi"></i>
                </div>
                <div class="col-6">
                    <div>
                        {{ properties.name }}
                    </div>
                    <div class="badge badge-secondary">
                        {{ properties.ethernet.address}}
                    </div>
                </div>
                <div class="col-5 text-right">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: {{properties.strength}}%;" aria-valuenow="{{properties.strength}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        {{ /devices }}
    </div>
</div>