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

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

    <!-- Heading -->
	<div class="page-title">
        <div class="flex-row">
            <h1>
                Splash Screen
                <div>
                    <a id="splash-show-all" class="button button-medium button-gray">Show All</a>
                    <a id="splash-hide-all" class="button button-medium button-gray">Hide All</a>
                </div>
            </h1>
        </div>

        <p>Manage uploaded splash images and set splash screen configuration options for connected BFD's.</p>
	</div>

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

    <!-- Spash Control -->
    <div class="box top-wrapper">
        <div class="flex-row flex-spaced">
            <h2>Splash Screen Control</h2>
            <div>
                <a id="splash-show" class="button button-medium button-gray">Show</a>
                <a id="splash-hide" class="button button-medium button-gray">Hide</a>
            </div>
        </div>
    </div>

    <!-- Configuration -->
    <div class="box box-top top-wrapper">
        <h2>Configuration</h2>
    </div>
    <div class="box box-stack">
        <div class="flex-row flex-spaced">
            <div class="tooltip-wrapper">
                Enable Timeout:
                <div class="tooltip">
                    <p>Enable the splash screen to be shown if no data is arriving to the current page.</p>
                </div>
            </div>
            <input id="splash-timeout-enable" type="checkbox">
        </div>
    </div>
    <div class="box box-stack">
        <div class="flex-row flex-spaced">
            <div class="tooltip-wrapper">
                Timeout Delay:
                <div class="tooltip">
                    <p>The delay in seconds, before the splash screen is shown (1 - 120).</p>
                </div>
            </div>
            <div class="input-group">
                <input id="splash-timeout-delay" type="number">
                <span>s</span>
            </div>
        </div>
    </div>
    <div class="box box-bottom">
        <div class="flex-row flex-spaced">
            <div class="tooltip-wrapper">
                Background Colour:
                <div class="tooltip">
                    <p>Background colour of the BFD while the splash screen is shown.</p>
                </div>
            </div>
            <div class="colour-group" id="config-background">
                <select class="colour-select">
                    <option value="#000000">Black</option>
                    <option value="#0000ff">Blue</option>
                    <option value="#00ffff">Cyan</option>
                    <option value="#008000">Green</option>
                    <option value="#222222">Grey</option>
                    <option value="#ff00ff">Magenta</option>
                    <option value="#ff0000">Red</option>
                    <option value="#ffff00">Yellow</option>
                    <option value="#ffffff">White</option>
                    <option class="custom">Custom</option>
                    <option class="custom-value" value="#ffffff" hidden>Custom</option>
                </select>
                <input class="colour-input" type="color">
            </div>
        </div>
    </div>

    <!-- Image Upload -->
    <div class="box box-top top-wrapper">
        <h2>Splash Image</h2>
    </div>
    <div class="box box-stack">
        <form id="upload-form" action="" method="post" enctype="multipart/form-data">
            <div class="flex-row flex-spaced">
                <div class="flex-row">
                    <div class="flex-heading">
                        Select Image to Upload:
                    </div>
                    <input id="imageToUpload" type="file" name="imageToUpload">
                </div>
                <div>
                    <a id="splash-upload" class="button button-medium button-gray">Upload</a>
                    <a id="splash-set" class="button button-medium button-gray">Set</a>
                </div>
            </div>
        </form>
    </div>
    <div class="box box-bottom">
        <div class="flex-row flex-center">
            <img id="image-preview" src="" alt="Upload an image to view preview"></img>
        </div>
    </div>


    <!--Buttons-->
	<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-splash.js?v=<?php echo VERSION_NUMBER;?>" defer></script>
<script>
$(document).ready(function() 
{
    let url = new URL(window.location.href);

    let model = new SplashModel(url.searchParams.get("bfd"));
    let controller = new SplashController(model);
    let view = new SplashView(controller);
});
</script>


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