<div id="devices">
    <div id="header-container" class="panel-header row-container">
        <div class="header-label">
            <p class="secondary-text">{{Strings.Pr_CONNECTED_DEVICES}}</p>
        </div>
        <div class="header-button-wrapper">
            <div id="refresh-devices" class="refresh-icon tips active" aria-label="{{Strings.Pr_CHECK_FOR_NEW_DEVICES}}" onclick="checkForDevices()"/>
        </div>
        <div class="header-spacer" />
    </div>
    <div id="device-container">
        <ul id="device-list">
        {{#each devices}}
            <li class="device {{#if error}}has-error{{/if}}">
                <div class="device-wrapper">
                    <p class="device-resolution secondary-text">{{resolution.width}}x{{resolution.height}}</p>
                    <div class="device-error icon-warning tips {{#if error}}active{{/if}}" aria-label="{{../Strings.Pr_CONNECTION_ERROR}}" />
                    <p class="device-name">{{name}}</p>
                </div>
            </li>
        {{/each}}
        </ul>
    </div>
    <div id="no-new-devices" class="user-notice">
        <p class="secondary-text">{{Strings.Pr_NO_NEW_DEVICES_FOUND}}</p>
        <div class="button-wrapper">
            <button id="OK-button" onclick="onUserNoticeOK()">{{Strings.Pr_OK}}</button>
        </div>
    </div>
    <div id="footer-container" class="row-container">
        <p class="panel-footer secondary-text">
            <a href="." id="learnmorelink" class="hostLink" target="_blank"
               onclick="openLearnMoreURL('{{Strings.Pr_LEARN_MORE_GOURL}}')">{{Strings.Pr_LEARN_MORE_1}}</a>
            {{Strings.Pr_LEARN_MORE_2}}
        </p>
        <div class="footer-spacer"/>
    </div>
</div>
