

<template>

    <div class="card" style="background: none;">
        <form >
            {{#layout.class.full}}
            <div class="card-header">
                <h3 class="card-title">
                <img src="sdk/images/icon.png" height="36" class="d-inline-block align-top" alt="" >
                {{app.about.name}}
                </h3>
                
            </div>
            {{/layout.class.full}}

            <div class="card-block" >
                <div class="form-group">
                    <label for="{{name}}" >Seed</label> 
                    <input type="text" class="form-control" name="seed" required placeholder="Put some seed here ..." />
                    <small id="emailHelp" class="form-text text-muted">Your private key will be generated from your seed.</small>
                </div>
                <div >
                
                    <label data-toggle="collapse" data-target="#collapsePassword">
                        <input type="checkbox"/> Encrypt my private key
                    </label>
                    <div class="form-group collapse" id="collapsePassword" >
                        <input type="text" class="form-control" name="password" placeholder="Password ..." />
                        <small id="emailHelp" class="form-text text-muted">This password will be required for unlock your key.</small>
                    </div>
                </div>
                <div><hr/>
                     <label >Network</label> 
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="endpoint" value="0x00" checked>
                        0x00 - app
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="endpoint"  value="0x01">
                        0x01 - network nodefull
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="endpoint"  value="0x02">
                        0x02 - network mixte
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="endpoint"  value="0x03">
                        0x03 - network nodeless
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="endpoint"  value="ropsten">
                        ropsten - network nodeless - ropsten
                      </label>
                    </div>
                    <hr/>
                </div>    
                {{^layout.class.full}}
                   <div>
                    <div style="text-align:right">
                        <button type="submit" class="btn btn-primary" >CONNECT</button> 
                    </div>
                    </div>

                {{/layout.class.full}}

            </div>
            {{#layout.class.full}}
            <div class="card-footer">
                <div style="text-align:right">
                    <button type="submit" class="btn btn-primary" >CONNECT</button> 
                </div>
            </div>
            {{/layout.class.full}}
        </form>
    </div>
</template>

<!--

    <form>
        <header>
            <h4 class="card-title">

            </h4>
        </header> 

        <section class="signin">  
            <div class="form-group row">
                <label for="{{name}}" class="col-sm-2 col-form-label">Your Seed</label> 

                  <input type="text" class="form-control form-control-sm" name="seed" placeholder="Your seed" />

            </div>

            <div class="form-group row">
                <label for="{{name}}" class="col-sm-2 col-form-label">{{name}} {{#required}}<span class="badge badge-pill badge-danger">Required</span>{{/required}}</label> 
                <div class="col-sm-10">

                    {{#type_password}}
                        <input type="password" class="form-control form-control-sm" name="{{name}}" placeholder="{{description}}" value="{{value}}" />
                    {{/type_password}}   

                   
                </div>
            </div>
            -->
            <!--
            <input type="text" name="seed" label="Your seed" value=""/>
            <input type="password" name="password" label="password" value=""/>
            <div class="card-footer text-muted">
                <input type="submit" class="btn btn-primary" value="Signin"></input>
                <a href="#" >no account ?</a>
            </div>

        </section>   

        <section class="signup" style="display:none">  
            <input type="text" name="seed" label="Your seed" value=""/>
            <input type="password" name="password" label="password" value=""/>
            <input type="password" name="confirmpassword" label="password" value=""/>
            <div class="card-footer text-muted">
                <input type="submit" class="btn btn-primary" value="Signup"></input>
                <a href="#">already registered ?</a>
            </div>
        </section> 

      </form>  
</template>
-->

<script>
  (function() {
    var doc = document.currentScript.ownerDocument;
    var template = doc.querySelector('template');
    window.customElements.define('xio-onboarding', class extends HTMLElement {
        constructor() {
            super();
        }
        connectedCallback() {

            var self = this
            var html = $(template).render({
                'app':app,
                'layout': {
                    'class': {
                        'small': true,
                    }
                }
            })
            $(this).html( html )
            $(this).find('form').submit(function(e) {
                e.preventDefault();
                try {
                    self.submit()
                } catch(error) {
                    console.log(error);
                }
                return false;
            })
            $(this).find('a').click(function() {
                $('.signin, .signup').toggle()
            })
        }

        submit() {
            var form = $(this).find('form');
            var seed = form.find("input[name='seed']").val();
            var password = form.find("input[name='password']").val();
            var endpoint = form.find("input[name='endpoint']:checked").val();
            return app.login(seed,password,endpoint)
        }

        importKey() {
            // https://www.html5rocks.com/en/tutorials/file/dndfiles/  
            var input = document.createElement('input');
            input.type = 'file';
            input.onchange = function(e) {
                var files = e.target.files;
                var file = files[0]
                var reader = new FileReader();
                reader.readAsText(file);
                reader.onload=function(){
                    return app.dapp.user.importKey(file.name,reader.result)
                }
            }
            input.click();
        }
       
    })
})();
</script>
