<nav data-ng-class="{ showSettings:toggleSettings }" data-ng-controller="controlPanel">
    <input id="settings-toggle" type="checkbox" class="settings" data-ng-model="toggleSettings" />
    <label for="settings-toggle" title="Configure Build Monitor Settings">Settings</label>

    <!-- workaround for angular-slider not working when initialised within a hidden element -->
    <ul>
        <li>
            <span class="slider-label">Font size</span>
            <slider floor="0.1" ceiling="2" step="0.02" precision="1" data-ng-model="settings.fontSize"></slider>
        </li>
        <li>
            <span class="slider-label">Columns</span>
            <slider floor="1" ceiling="8" step="1" precision="0" data-ng-model="settings.numberOfColumns"></slider>
        </li>
        <li>
            <input data-ng-model="settings.colourBlind"
                   data-ng-false-value="0"
                   data-ng-true-value="1"
                   id="settings-colour-blind" type="checkbox" />
            <label for="settings-colour-blind" title="Colour blind-friendly colour scheme">Colour blind mode?</label>
        </li>
        <li>
            <input data-ng-model="settings.showCulprits"
                   data-ng-false-value="0"
                   data-ng-true-value="1"
                   id="settings-show-culprits" type="checkbox" />
            <label for="settings-show-culprits" title="Whether to show culprits">Show culprits?</label>
        </li>
        <li>
            <input data-ng-model="settings.stripVanadium"
                   data-ng-false-value="0"
                   data-ng-true-value="1"
                   id="settings-strip-vanadium" type="checkbox" />
            <label for="settings-strip-vanadium" title="Whether to strip Vanadium prefix">Strip "vanadium-" prefix?</label>
        </li>
        <li>
            <a class="btn"
               href="configure"
               title="Configure the '${it.displayName}' view">Add/Remove Jobs</a>
        </li>
        <li>
            <button class="btn btn-primary" data-ng-click="toggleSettings=false">Done</button>
        </li>
    </ul>
</nav>