<style include="diagnostics-shared">
#inputListContainer {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
</style>
<div id="inputListContainer" tabindex="0">
<div class="diagnostics-cards-container-nav">
<div class="card-width">
<template is="dom-if" if="[[keyboards.length]]">
<input-card device-type="keyboard" devices="[[keyboards]]" id="keyboardInputCard"
on-test-button-click="handleKeyboardTestButtonClick"
host-device-status="[[hostDeviceStatus]]">
<div slot="title" id="keyboardTitle" tabindex="0" role="heading">
[[i18n('inputCategoryKeyboard')]]
</div>
</input-card>
</template>
<template is="dom-if" if="[[showTouchpads]]">
<input-card device-type="touchpad" devices="[[touchpads]]"
on-test-button-click="handleTouchpadTestButtonClick"
host-device-status="[[hostDeviceStatus]]">
<div slot="title" role="heading">[[i18n('inputCategoryTouchpad')]]</div>
</input-card>
</template>
<template is="dom-if" if="[[showTouchscreens]]">
<input-card device-type="touchscreen" devices="[[touchscreens]]"
on-test-button-click="handleTouchscreenTestButtonClick"
host-device-status="[[hostDeviceStatus]]">
<div slot="title" role="heading">[[i18n('inputCategoryTouchscreen')]]</div>
</input-card>
</template>
</div>
</div>
</div>
<keyboard-tester></keyboard-tester>
<touchscreen-tester touchscreen-id-under-testing="{{touchscreenIdUnderTesting}}">
</touchscreen-tester>
<touchpad-tester></touchpad-tester>