<?php require_once "atp.header.php" ?>

<section data-heading="display" class="content-wrapper" id="bfd-settings">

	<!--Heading-->
	<div class="page-title">
		<h1>
			Display Settings
		</h1>
		<p>
			Modify the general settings for the connected display's.
		</p>
	</div>

    <!--Active Display-->
    <div class="box top-wrapper">
        <div class="flex-row flex-spaced">
            <div><h2>Active Display</h2></div>
            <select id="display-select"></select>
        </div>
    </div>

    <!--General Settings-->
    <div class="box box-top top-wrapper">
        <h2>General Settings</h2>
    </div>
    <div class="box box-bottom">
        <div class="flex-row flex-spaced">
            <div class="tooltip-wrapper">
                Orientation:
                <div class="tooltip">
                    <p>The orientation of the display. Changing this will cause the display to restart.</p>
                </div>
            </div>
            <select id="orientation-select">
                <option value="landscape">Landscape</option>
                <option value="portrait">Portrait</option>
            </select>
        </div>
    </div>

    <!--Lighting Settings-->
    <div class="box box-top top-wrapper">
        <div class="tooltip-wrapper">
            <h2>Brightness Configuration</h2>
            <div class="tooltip">
                <p>Set the backlight brightness for different network lighting levels.</p>
            </div>
        </div>
    </div>
    <div class="box box-stack">
        <div class="flex-row flex-spaced">
            <div>Lighting Off:</div>
            <div class="input-group">
                <input level="1" class="input-lighting" type="number">
                <span>%</span>
            </div>
        </div>
    </div>
    <div class="box box-stack">
        <div class="flex-row flex-spaced">
            <div>Low Lighting:</div>
            <div class="input-group">
                <input level="2" class="input-lighting" type="number">
                <span>%</span>
            </div>
        </div>
    </div>
    <div class="box box-stack">
        <div class="flex-row flex-spaced">
            <div>Medium Lighting:</div>
            <div class="input-group">
                <input level="4" class="input-lighting" type="number">
                <span>%</span>
            </div>
        </div>
    </div>
    <div class="box box-stack">
        <div class="flex-row flex-spaced">
            <div>High Lighting:</div>
            <div class="input-group">
                <input level="0" class="input-lighting" type="number">
                <span>%</span>
            </div>
        </div>
    </div>
    <div class="box box-bottom">
        <div class="flex-row flex-spaced">

            <div class="tooltip-wrapper">
                Set Current Level:
                <div class="tooltip">
                    <p>Set the current lighting level of the display's backlight.</p>
                </div>
            </div>

            <div class="flex-field">
                <select id="lighting-level-select">
                    <option value="1">Off</option>
                    <option value="2">Low</option>
                    <option value="4">Medium</option>
                    <option value="0">High</option>
                </select>
                <a id="set-lighting-level" class="button button-medium button-gray">Update</a>
            </div>
        </div>
    </div>

    <!--Button Box-->
    <div class="button-box" id="button-container">
		<div class="box">
			<a id="ok-button" class="button button-gray button-medium">OK</a>
			<a id="cancel-button" class="button button-gray button-medium">Cancel</a>
			<a id="apply-button" class="button button-gray button-medium">Apply</a>
		</div>
	</div>

</section>

<script type="text/javascript" src="js/utils.bfd.js?v=<?php echo VERSION_NUMBER;?>" defer></script>
<script type="text/javascript" src="js/atp.bfd-settings.js?v=<?php echo VERSION_NUMBER;?>" defer></script>
<script>
$(document).ready(function() 
{
    let url = new URL(window.location.href);

    let model = new BFDSettingsModel(url.searchParams.get("bfd"));
    let controller = new BFDSettingsController(model);
    let view = new BFDSettingsView(controller);
});
</script>

<?php require_once "footer.php";?>