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

<link rel="stylesheet" href="/css/gridstack.min.css?v=<?php echo VERSION_NUMBER?>">

<!--Display section-->
<section data-heading="display" class="content-wrapper" id="data-page" data-no-hold-button="true">
    
    <!--Display Configuration-->
    <div class="box box-top top-wrapper" id="display-select-container" hidden>
        <div class="flex-row" id="display-select-row">
            <h2>Active Display:</h2>
            <select id="display-select"></select>
        </div>
    </div>
    <div class="box top-wrapper" id="page-config-container">
        <div class="flex-row">
            <div>
                <h2>Display Configuration</h2>
            </div>
            <i class="fas fa-angle-down fa-lg"></i>
            <a class="button button-gray button-medium" id="fullscreen">Fullscreen</a>
        </div>
    </div>
    <div id="page-config-options" hidden>
        <div class="box box-stack page-config">
            <div class="tooltip-wrapper">
                Number of Pages:
                <div class="tooltip">
                    <p>The number of pages saved to the device. If using a push-button, consider setting this number as low as possible.</p>
                </div>
            </div>
            <select id="page-count-select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
        </div>
        <div class="box box-stack page-config">
            <div class="tooltip-wrapper">
                Current Page:
                <div class="tooltip">
                    <p>Change the current page being configured. This does not change the page shown on the display.</p>
                </div>
            </div>
            <select id="page-select">
                <option value="1">1</option>
            </select>
        </div>
        <div class="box box-stack page-config">
            Number of Fields:
            <select id="field-count-select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
        </div>
        <div class="box box-bottom page-config">
            <div class="tooltip-wrapper">
                Divider Colour:
                <div class="tooltip">
                    <p>
                        Change the colour of the borders between cells.
                        There are no borders around the outer edge of the display
                    </p>
                </div>
            </div>

            <div class="colour-picker" id="border-colour-picker">
                <input type="color">
                <select class="border-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>
                </select>
            </div>
        </div>
    </div>

    <!--Code Textarea-->
    <textarea id="json-area" rows="5" hidden></textarea>

    <!--Page Grid-->
    <div class="grid-container" id="grid-container">
        <div id="data-grid" class="grid grid-stack"></div>
    </div>

    <div class="box box-top top-wrapper">
        <div class="flex-row l-row-wrap responsive-top-margin" id="save-row">
            <h2>Save Configuration:</h2>
            <div class="l-row-nowrap">
                <input type="text" id="save-config-name">
                <a id="save-button" class="button button-gray button-medium">Save</a>
            </div>
        </div>
    </div>
    <div class="box box-bottom">
        <div class="flex-row l-row-wrap" id="load-row">
            <div class="flex-row l-row-wrap">
                <div class="flex-row l-row-wrap responsive-top-margin">
                    <h2>Load Configuration:</h2>
                    <select id="saved-configs"></select>
                </div>
            </div>
            <div class="flex-row l-row-nowrap">
                <div id="load-wrapper">
                    <a id="load-button" class="button button-gray button-medium">Load</a>
                    <a id="delete-button" class="button button-gray button-medium">Delete</a>
                </div>
                <a id="reset-button" class="button button-gray button-medium">Reset</a>
            </div>
        </div>
    </div>

    <!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box">
			<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/gridstack-all.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script type="text/javascript" src="/js/components/bar-chart.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script type="text/javascript" src="/js/atp.channel-menu.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script type="text/javascript" src="js/atp.display.js?v=<?php echo VERSION_NUMBER;?>" defer></script>
<script type="text/javascript" src="/js/Chart.min.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script>
$(document).ready(function() 
{
    let url = new URL(window.location.href);

    let model = new DisplayModel(url.searchParams.get("bfd"));
    let controller = new DisplayController(model);
    let view = new DisplayView(controller, url.searchParams.get("text"));
});
</script>

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