<div class="container">
    <div class="row">
        <h4> Setup a new town</h4>
        <p>This form let you start joining a nation.</p>
        <p>For dev you can stay like this and use http instead of https. To join a nation you need:</p>
        <ul>
            <li> Get a domain name register to a publicIP that route web traffic from 80 and 443 to this machine</li>
            <li> Get a pagan identity and be authenticated <a onclick="app.load('apxmain','pagancreate',{})"> click here to create or authentify yoursefl</a> 
            <li> Synchronize the nations, to update your nationchains (carefful all your local stuff will be deleted)</li>
            <li> Ready to your new mayor role of this town</li>
            <li> Start saling your hosting</li>
        </ul>
        <div class="col-sm-2">
        </div>
        <div class="col-sm-10">         
            <div class="mb-3 row">
                <label for="selectnationid" class="col-sm-6 col-form-label">Select the nation to join</label>
                <div class="col-sm-6">
                   <select class="form-select" data-nationId="{{nationId}}" aria-label="" placeholder="A nation">
                       {{#nations}}
                        <option {{#selected}}selected{{/selected}} value="{{nationId}}">{{nationId}}</option>
                       {{/nations}}
                    </select>
                    <input class="d-none" id="inputnationId" value="{{nationId}}">
                </div> 
            </div>
            <div class="mb-3 row">
                <label for="inputtownid" class="col-sm-6 col-form-label">Your Town</label>
                <div class="col-sm-6">
                    <input type="text" value="{{townId}}" class="form-control" id="inputtownid">
                </div> 
            </div>
            <div class="mb-3 row">
                <label for="inputtribeid" class="col-sm-6 col-form-label">Your Tribes</label>
                <div class="col-sm-6">
                    <input type="text" value="{{tribeId}}" class="form-control" id="inputreibeid">
                </div> 
            </div>
            <div class="mb-3 row">
                <label for="inputdnstown" class="col-sm-6 col-form-label">Domain name of your town (to access this app from the web)</label>
                <div class="col-sm-6">
                    <input type="text" value="{{dns}}" class="form-control" id="inputdnstown">
                </div> 
            </div>
            <div class="col-auto">
                <button onclick="setup.lauchtown(document.getElementById('inputnationId').value, document.getElementById('inputtownId').value,document.getElementById('inputdns').value)" class="btn btn-primary mb-3">Launch this town</button>
            </div>
        </div>
    </div>
</div>