<script type="module">
  import Litedom from '//unpkg.com/litedom';
  
  Litedom({
    tagName: 'hello-world',
    template: 'Hello {this.prop.name}!'
  });
</script>


<!-- Will display 'Hello Mardix!' -->
<hello-world name="Mardix"></hello-world>

<script type="module">
  import Litedom from '//unpkg.com/litedom';

  Litedom({
    // custom tag name
    tagName: 'my-counter',
    // template
    template: `Counting: {this.count}`,
    // reactive data
    data: {
      count: 0
    },
    // lifecycle method
    created(){
      // this.prop.start, properties from the element
      this.data.count = this.prop.start || 0;
      setInterval(_=> {
        this.data.count++;
      }, 1000)
    }
  });
</script>


<!-- the count will start at 5 for this custom element -->
<my-counter start=5></my-counter>

<!-- the count will start at 21 for this custom element -->
<my-counter start=21></my-counter>

<script type="module">
  import Litedom from '//unpkg.com/litedom';

  Litedom({
    // The target element
    el: '#helloWidget', 
    // The reactive data
    data: {
      name: 'Litedom'
    }
  });
</script>

<div id="helloWidget">
  <div>Hello {this.name}</div>
  <div>Today's date: {new Date().toISOString().slice(0, 10)}</div>
</div>

<!-- the count will start at 5 for this custom element -->
<my-counter id="myCounter1" start=5></my-counter>

<script type="module">
  import Litedom from '//unpkg.com/litedom';

  Litedom({
    // custom tag name
    tagName: 'my-counter',
    // template
    template: `Counting: {this.count}`,
    // reactive data
    data: {
      count: 0
    },
    increment() {
      this.data.count++;
    },
    decrement() {
      this.data.count--;
    },
    // Lifecycle, when element is removed this method will be executed
    removed() {
      console.log('Element is removed')
    }
  });

  const el = document.querySelector('#myCounter1');

  // #data shows the data
  console.log('Show Data', el.data);

  // execute #increment() method, to increment the count
  el.increment();

  // execute #decrement() method, to decrement the count
  el.decrement();

  // remove the element off the page, the #removed method will be executed
  el.remove();

</script>

<style>
  .somAClass {
    color: blue
  }
  .myClassB {
    color: red
  }
</style>

<script type="module">
  import Litedom from '//unpkg.com/litedom';

  Litedom({
    el: '#myContainer',
    // reactive data
    data: {
      count: 0,
      carsList: ['BMW', 'Mercedes', 'Audi', 'Tesla'],
      myStyle: {
        color: 'red',
        background: 'yellow'
      }
    },
    // lifecycle method
    created(){
      // this.prop.start, properties from the element
      this.data.count = this.prop.start || 0;
      setInterval(_=> {
        this.data.count++;
      }, 1000)
    }
  });

</script>

<div id="myContainer">

  <div>Counting {this.count}</div>

  <!-- if/else -->
  <div :if="this.count > 10">The count is greater than 10</div>
  <div :else>At least 10</div>

  <!-- for loop -->
  <ul>
    <li :for="car in this.carsList">{car}</li>
  </ul>

  <!-- style map -->
  <div :style="this.myStyle">
    The background will be yellow, the font will be red
  </div>

  <!-- Class -->
  <div :class="someClassA: this.count === 7; myClassB: this.count === 10">
    Will have .someClassA if count is 7, 
    will then have .myClassB when count is 10
  </div>
</div>

<script type="module">
  import Litedom from '//unpkg.com/litedom';

  Litedom({
    el: '#myContainer',
    data: {
      name: '',
      lastName: '',
      fullName(state) {
        return `${state.name} ${state.lastName}`
      }
    }
  });

</script>

<div id="myContainer">
  Hello {this.name}. Your fullname is {this.fullName}

  <!-- as you type it will update #data.name -->
  <div><input type="text" @bind="name"></div>
  <div><input type="text" @bind="lastName"></div>

</div>

<script type="module">
  import Litedom from '//unpkg.com/litedom';
  
  Litedom({
    el: '#counterWidget',
    data: {
      count: 0
    },
    up() {
      this.data.count++;
    },
    down() {
      this.data.count--;
    }
  });

</script>



<div id="counterWidget">
  <h4>{this.count}</h4>

  <div>
    <button @click="down" class="button-outline">DOWN</button>
    <button @click="up" class="button-outline">UP</button>
  </div>

</div>

<style style type="text/css">
  .circle {           
    border: thin solid black;
    border-radius: 60px;
    width:100px;
    height:100px;
    text-align: center;
    margin-bottom: 10px;
  }
</style>

<script type="module">
  import Litedom from '//unpkg.com/litedom';
  
  const circleComponent = {
    tagName: 'comp-circle',
    template: `
      <div class="circle">
        <span></span>
      </div>
    `,
    created() {
      this.el.querySelector('div').style.backgroundColor = this.prop.color;
    }
  }

  const mainComponent = {
    el: '#mainComponent',
    data: {
      colors: [
        '#ff0000',
        '#00ff00',
        '#ffff00'
      ]
    }
  }

  // Initialize all in one call
  Litedom([mainComponent, circleComponent]);

</script>

<div id="mainComponent">
  <comp-circle 
    :for="color, index in this.colors" 
    :key="{index}" 
    color="{color}">
  </comp-circle>
</div>

<script type="module">
  import Litedom from '//unpkg.com/litedom';
  
  ...
</script>

  <script type="module">
    import Litedom from '//unpkg.com/litedom';
    
    Litedom({
      el: '#counterWidget',
      data: {
        count: 0
      },
      up() {
        this.data.count++;
      },
      down() {
        this.data.count--;
      }
    });

  </script>

  <div class="container">
    <div class="row">
      <div class="column center">
        <h3 class="title">Counter</h3>
      </div>
    </div>
    <div class="row">
      <div class="column center" id="counterWidget">
        <div><h4>{this.count}</h4></div>
        <div>
          <button @click="down" class="button-outline">DOWN</button>
          <button @click="up" class="button-outline">UP</button>
        </div>
      </div>
    </div>
  </div>