{{navigation}}
<main>
    <header>
        <div class="title">Custom Domains</div>
        <div class="profile initials">JT</div>
    </header>
    <div class="sized">
        {{navDomains}}
        <div class="title">
            Custom Domain Management
            <span id="CreateButton" class="button">Create New</span>
        </div>
        <div class="nodata">
            <div class="title">Set Up a Custom Domain Name for Your Shares</div>
            <div class="subTitle">Click Create New to get started. <a href="https://zrok.io" target="_blank">Read More</a></div>
            <div class="icon world"></div>
        </div>
        <div id="DataTable" class="area table" style="display: none;">
            <div class="grid thead rows">
                <div>Date Added</div>
                <div>Domain</div>
                <div>CNAME Value</div>
                <div>Status</div>
                <div>Remove</div>
            </div>
            <div id="Rows"></div>
        </div>
    </div>
</main>

<div id="RowTemplate" class="template">
    <div class="grid rows">
        <div>{{date}}</div>
        <div>{{domain}}</div>
        <div>{{value}}</div>
        <div><span class="icon {{status}}"></span></div>
        <div><span class="icon remove" data-id="{{id}}"></span></div>
    </div>
</div>

<div id="AddModal" class="modal box">
    <div class="close"></div>
    <div class="title world">Add Custom Domain</div>
    <label>1. Check Host Name Availability</label>
    <div class="grid inputButton">
        <input id="DomainName" type="text" value="foo.example.com"/>
        <button id="ValidateButton" type="button">Validate</button>
        <button id="ValidatedButton" type="button" style="display: none;"></button>
    </div>
    <div class="validated">
        <label>2. Add CNAME DNS Record with Host</label>
        <div class="grid pair">
            <label>Type</label>
            <div>CNAME</div>
        </div>
        <div class="grid pair">
            <label>Name</label>
            <div>foo</div>
        </div>
        <div class="grid pair">
            <label>Value</label>
            <div class="canonical">432zcd5.6zdcdz.zrok-cname.com<span class="copy"></span></div>
        </div>
        <div class="example">
                <div>
                    <label>Type<span class="red">*</span></label>
                    <select readonly>
                        <option>CNAME</option>
                    </select>
                </div>
                <div>
                    <label class="greyed">Name<span class="red">*</span></label>
                    <input id="Name" type="text" readonly value="foo" />
                </div>
                <div>
                    <label class="greyed">Value<span class="red">*</span></label>
                    <input id="Value" type="text" class="canonical" readonly value="432zcd5.6zdcdz.zrok-cname.com" />
                </div>
                <div>
                    <label>TTL</label>
                    <select readonly>
                        <option>1/2 Hour</option>
                    </select>
                </div>
        </div>
        <label>3. Testing the CNAME</label>
        <div class="mt20">
            Once created it might take a few minutes before the new record is reflected in the DNS, but you can confirm that your record is created using a command line tool like <span class="secondary">dig</span> or <span class="secondary">nslookup</span>. 
        </div>
        <div class="dark">
            <div class="grid pair red mb20">
                <label>nslookup</label>
                <div class="domain">foo.example.com</div>
            </div>
            <div class="grid pair">
                <label>Server:</label>
                <div>127.0.0.1</div>
            </div>
            <div class="grid pair mb20">
                <label>Address:</label>
                <div>127.0.0.1#53</div>
            </div>
            <div>Non-authoritative answer:</div>
            <div><span class="domain marginRight"></span> canonical name = <span class="canonical"></span></div>
        </div>
        <div>
            Or tap <a href="javascript:page.test();">here</a> to test it. 
        </div>
    </div>
</div>

<style>
    .rows {
        grid-template-columns: 250px 400px auto 75px 75px;
        line-height: 45px;
    }
</style>

<script>
    var page = {
        canonical: "432zcd5.6zdcdz.zrok-cname.com",
        init: () => {
            page.events();
        },
        events: () => {
            $("#CreateButton").click(page.showCreate);
            $("#ValidateButton").click(page.validate);
        },
        showCreate: function() {
            modal.show("AddModal");
        },
        validate: (e) => {
            $(".validated").addClass("valid");
            $("#ValidateButton").hide();
            $("#ValidatedButton").show();
        },  
        data: (e) => {
            if (e.error) zrok.loggedOut();
            else {
                if (e.data && e.data.length>0) {
                    for (var i=0; i<e.data.length; i++) {
                        var template = $("#RowTemplate");
                        var element = template.clone();
                        element.removeClass("template");
                        var item = e.data[i];
                        for (var prop in item) {
                            element.html(element.html().split("{{"+prop+"}}").join(item[prop]));
                        }
                        $("#Rows").append(element);
                    }
                    modal.close();
                    $(".nodata").hide();
                    $("#DataTable").show();
                }
            }
        },
        test: function() {
            service.get("domains", {}, page.data);
        }
    }
</script>