import live-web.dom
import live-elements-web-server.view
import live-elements-web-server.style

// component Markup extends PageView
component Markup < PageView{
  // link to index.css
  static any[] use = [ScopedStyle{ src: './index.css'}]

  // <article>
  Article{
    // <h1>This is a heading</h1>
    // similar to calling  "new H1('This is a heading')" in js
    H1`This is a heading`

    // <p>This is a paragraph</p> 
    P`This is a paragraph`

    P{  // call new T(...), new B(...), new T(...), ...
      T`This is a second paragraph, with `B`bold`T` and `I`italic`T` text.
        This paragraph is written on multiple lines.`
    }

    // <h2>Subheading</h2>
    H2`Subheading`

    // <ul>
    Ul{
      Li`First list item` // <li>
      Li`Second list item` // <li>
    }
    
  } // </article>
}

import live-web.dom
import live-web.model
import live-elements-web-server.view

// define a Counter state component
component Counter < State{
  number counter : 0
}

component CounterView < PageView{
  id: counterView // id to reference inside the hierarchy

  // create the counter
  Counter state: Counter{}

  Div{ classes: ['center', 'full']
    Div{ classes: ['counter']
      P{ 
        // The text property will now be bound to the counterView.state.counter
        // Whenever counterView.stat.counter changes, the text will change as well
        T{ text: 'Counter value: ' + counterView.state.counter } 
      }
      // as the 2 buttons update the state, the views will update as well
      Button{ on click: () => {counterView.state.counter++} T`+` }
      Button{ on click: () => {counterView.state.counter--} T`-` }
    }
  }
}

import live-web.dom
import live-web.model
import live-elements-web-server.view

component Subscription < State{
  string name: ''
  number price: 0
}

// Service component with 2 subscription types
component Service < State{
  Subscription basic: Subscription{ name: 'Basic' price: 1.00 }
  Subscription advanced: Subscription{ name: 'Advanced' price: 5.00 }
}

component ServiceView < PageView{
  id: serviceView

  // main state, the service component with 2 subscriptions
  Service state: Service{}

  Div{ classes: ['center', 'full']
    Div{ 
      H2`Subscription prices`
      Ul{
        Li{ // basic subscription
          T{ text: serviceView.state.basic.name + ':' }
          B{ T{ text: serviceView.state.basic.price.toFixed(2) + '$' }} 
        }
        Li{ // advanced subscription
          T{ text: serviceView.state.advanced.name + ': ' }
          B{ T{ text: serviceView.state.advanced.price.toFixed(2) + '$' }} 
        }
      }
      P{
        Button{
          on click: () => {// make subscriptions more expensive
            serviceView.state.basic.price += 1
            serviceView.state.advanced.price += 1
          }
          T`Increment Prices`
        }
        Button{
          on click: () => { serviceView.state.advanced.name  = 'Premium' }
          T`Upgrade to premium`
        }
      }
    }
  }
}

import live-web.dom
import live-web-view.content
import live-web-view.layout
import live-elements-web-server.view
import live-elements-web-server.style

// component StyledMarkup extends PageView
component StyledMarkup < PageView{

  static any[] use = [
  // import styles from live-web-view.content.Content
  Content,
  // import styles from live-web-view.layout.ColLayout
  ColLayout,
  // import index.css
  ScopedStyle{ src: './index.css'}
  ]

  Content{
  // similar as calling "new H1('This is a heading')" in js
  H1`This is a heading`

  // the same as calling "new P('This is a heading')" in js
  P`This is a paragraph`

  P{  // call new T(...), new B(...), ...
    T`This is a second paragraph, with `B`bold`T` and `I`italic`T` text.
    This paragraph is written on multiple lines.`
  }

  Ul{
    Li`First list item`
    Li`Second list item`
  }

  ColLayout{
    Col{ P`Paragraph in column one` }
    Col{ P`Paragraph in column two` }
  }
  }
}