<template>

<div class="login-screen">
    <div class="view">
        <div class="page" data-name="login-screen">
            <div class="page-content login-screen-content">               
                <div class="block text-align-center">
                    <div class="logo">
                        <img src="resources/images/logo.png" alt="">
                    </div>
                </div>                     
                <form class="login-form">
                    <div class="list">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <!-- <div class="item-title item-label text-color-black">{{@global.LANGUAGE.LOGIN_MSG02}}</div> -->
                                    <div class="item-input-wrap">
                                        <input type="text" name="username" placeholder="{{@global.LANGUAGE.LOGIN_MSG02}}" value="">
                                         <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <!-- <div class="item-title item-label text-color-black">{{@global.LANGUAGE.LOGIN_MSG03}}</div> -->
                                    <div class="item-input-wrap">
                                        <input type="password" name="password" placeholder="{{@global.LANGUAGE.LOGIN_MSG03}}" value="">
                                        <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                            <li class="forget_pwd_wrapper text-align-right">
                              
                                    <!-- <div class="item-title item-label text-color-black">{{@global.LANGUAGE.LOGIN_MSG03}}</div> -->
                                    <!-- <div class="item-input-wrap">
                                        <input type="password" name="password" placeholder="{{@global.LANGUAGE.LOGIN_MSG03}}" value="111111">
                                        <span class="input-clear-button"></span>
                                    </div> -->
                                <a href="#" class="color-white ">{{@global.LANGUAGE.LOGIN_MSG05}}</a>          
                               
                            </li>
                            <!-- <li class="forget_pwd_wrapper">       
                                
                            </li>  -->
                        </ul>
                    </div>
                    <div class="block">
                        <button type="submit" class="button button-fill button-big">{{@global.LANGUAGE.LOGIN_MSG04}}</button>
                    </div>                                     
                </form>               
            </div>
        </div>
    </div>
</div>

</template>

<script>
  // script must return component object
    return {
        data: function () {
            var ret = {};           
            
            
            return ret;
        },
        methods: {
           
        },
       
        on: {
            pageInit: function (e, page) { 
                var self = this;

                console.log('here');

                /*var loginForm = page.$el.find('.login-form');

                

                $$(loginForm).on('submit', function(e){
                    e.preventDefault();
                    console.log('submitted');
                    return;
                });*/
                
            },     
            pageAfterOut: function () {
                // page has left the view
            },
        }
    };
</script>