{% load freeadmin %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
    <title>{{ sw_version }}</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css">html, body.{{ DOJANGO.THEME }} { width: 100%; height: 100%; }</style>
    {% include "dojango/include.html" %}
    <script type="text/javascript" src="{{ DOJANGO.DOJO_URL }}/freenasdojo.js"></script>
    <link href="{{ STATIC_URL }}favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/template.css" type="text/css" />
    <style type="text/css">
        .form th {
            width: 150px;
        }
    </style>
    <script type="text/javascript">
    require([
        "dojo",
        "dijit/registry",
        "dijit/Dialog",
        "dojo/ready",
        "dojo/_base/xhr",
        "dojo/_base/html",
        "dijit/MenuItem",
        "dijit/PopupMenuItem",
        "dijit/form/Button",
        "dijit/form/TextBox",
        "dijit/layout/ContentPane",
        "dijit/layout/BorderContainer",
        ], function(dojo, registry) {
            dojo.ready(function() {
                var primaryUseCaseRadios = document.getElementById("id_primary_use_case").querySelectorAll("input[type=radio]");
                var otherPrimaryUseCaseRadio = primaryUseCaseRadios[primaryUseCaseRadios.length - 1];
                var otherPrimaryUseCase = document.getElementById("id_other_primary_use_case");
                var otherPrimaryUseCaseTr = otherPrimaryUseCase.parentNode.parentNode;
                var toggleOtherPrimaryUseCase = function() {
                    if (otherPrimaryUseCaseRadio.checked)
                    {
                        otherPrimaryUseCaseTr.style.display = "table-row";
                        otherPrimaryUseCase.required = true;
                    }
                    else
                    {
                        otherPrimaryUseCaseTr.style.display = "none";
                        otherPrimaryUseCase.required = false;
                    }
                }
                for (var i = 0; i < primaryUseCaseRadios.length; i++)
                {
                    primaryUseCaseRadios[i].onclick = toggleOtherPrimaryUseCase;
                }
                toggleOtherPrimaryUseCase();

                dojo.connect(registry.byId("doDismissButton"), "onClick", function() {
                    document.location = "?dismiss_registration_form=1";
                });
            });
    });
    </script>
</head>
<body class="{{ DOJANGO.THEME }}" style="background:none repeat scroll 0 0 #ECEFF0;">

    <div data-dojo-type="dijit.layout.BorderContainer" id="outerLayout" data-dojo-props="gutters: false">
        <div data-dojo-type="dijit.layout.ContentPane" id="topLayout" style="height: 95px;" data-dojo-props="region: 'top'">
            <div id="page-header">
                 <div>
                     <a href="/" title="{{ sw_name }}&trade;"><img src="{{ STATIC_URL }}images/ui/{{ sw_name|lower }}-logo.png?cache={{ cache_hash }}" alt="{{ sw_name }}&trade;" style="padding-left:10px;"/></a>
                 </div>
            </div>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'" style="padding: 10px;">

            <div style="padding: 10px; width: 80%; margin: 0 auto;">
                <h1>Customer Information - TrueNAS&trade;</h1>

                {% if customer_information.data %}
                    <p style="padding-left: 10px;">
                        In order to provide you with the best possible support experience, we want to make sure that our
                        records are up-to-date. Please review the information and make any necessary changes. Thank you.
                    </p>
                {% endif %}

                <form action="." method="post" enctype="multipart/form-data" name="validate">
                    {% csrf_token %}

                    <table class="form">
                        {% admin_form form %}
                    </table>

                    <div style="padding-left: 10px; padding-top: 10px;">
                        <button data-dojo-type="dijit.form.Button" type="submit">
                            Save
                        </button>
                        <button data-dojo-type="dijit.form.Button" id="dismissButton" onClick="dismissDialog.show();">
                            Dismiss
                        </button>
                    </div>

                </form>

                <div data-dojo-type="dijit/Dialog" data-dojo-id="dismissDialog" title="Are you sure?"
                     style="display: none; width: 480px; max-width: 75%;">
                    <div class="dijitDialogPaneContentArea">
                        <b>Warning:</b> receiving technical support and assistance is contingent upon
                        iXsystems receiving the information in a completed registration form.  By opting
                        out, you are acknowledging that you are not fulfilling a necessary requirement
                        needed to obtain technical support and assistance from iXsystems.
                    </div>

                    <div class="dijitDialogPaneActionBar">
                        <button data-dojo-type="dijit/form/Button" type="submit" id="doDismissButton">Dismiss</button>
                        <button data-dojo-type="dijit/form/Button" type="button"
                                data-dojo-props="onClick:function(){dismissDialog.hide();}"
                                id="cancelDismissButton">Cancel</button>
                    </div>
                </div>

            </div>

        </div>
    </div>

</body>
</html>
