<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test_app">

</div>

<!--<script src="./lex/lex.js"></script>-->
<!--<script src="./parser/parser.js"></script>-->
<!--<script src="./generator/generator.js"></script>-->
<!--<script src="./main/main.js"></script>-->
<!--<script src="reactivity/reactive.js"></script>-->
<!--<script src="./router/router.js"></script>-->

<script src="build/mini.min.js"></script>
<script>

    var app = new Mini({

        el: '#test_app',
        template: `<div id="test_app">

    <p> {{m_name}}</p>
    <input m-model="m_name" />

    <h1> This is page No {{page_no}} </h1>
    <h1> I am  {{m_name}} </h1>
    <button m-on:click="change_name()" > Change Name </button>

    <p m-for=" item in arr "> {{item.a}} </p>
    <br>
    <br>
    <p m-for=" item in obj_test "> {{item}} </p>

    <button  m-on:click="update_array()"> view update </button>
    <button  m-on:click="test_obj()"> is update </button>

    <a href="#/page2"> open test page </a>


</div>`,
        data: {

            page_no: 0,
            obj_test: {
                t: 'test test_1',
                s: 'sss'
            },
            m_name: ' knight king',
            arr: [{
                a: 'a'
            },
                {
                    a: 'b'
                },
                {
                    a: 'v'
                }]

        },
        methods: {


            update_array: function () {

                var temp = this.get('arr');
                console.log(' temp is ', this, temp);
                this.set('obj_test.test_new', (Math.floor(Math.random() * 10)));
//                this.arr[0] = {a: 'fff'};
                console.log(' after :: ', this.get('obj_test'));
//                this.set('arr',temp);

            },
            test_obj: function () {

                this.obj_test.test_new = ' aadil '+(Math.floor(Math.random() * 10));
                this.m_name = ' aadil '+(Math.floor(Math.random() * 10)+10);

            },
            change_name: function () {

                this.set('m_name', 'John Snow');

            }
        }

    });


    var app2 = new Mini({
        el: '#test_app',
        template: `<div id="test_app">
        <h1> This is :: {{page_name}}</h1>
        <a href="#/page3" > go to third </a>
        </div>`,
        data: {

            page_name: 'test page 2'

        }
    });

    var app3 = new Mini({
        el: '#test_app',
        template: `<div id="test_app">
        <h1> This is third page, {{txt}}</h1>
        <a href="#/" > go to home </a>

</div>`,
        data: {

            txt: 'is it ?'

        }
    });


    MiniRouter.when('/', {
        controller: app
    }).when('/page2', {
        controller: app2
    }).when('/page3', {
        controller: app3
    }).done()


</script>

</body>
</html>