class ExampleState extends IF.State
  {
    static INLINE_TEMPLATE = `
    <h1>Hello InfrontJS World!</h1>
    <p>InfrontJS templating logic is realized by the great <a href="https://ejs.co/" target="_blank">EJS library</a>.</p>
    <p>InfrontJS adds some minimal functions for formatting dates, numbers as well as localization.</p>
    <p>Number: <%= _lcn( 12345679 ) %></p>
    <p>Date: <%= _lcd( new Date() ) %></p>
    <hr />
    <div id="innerContainer">
        <div id="loading"></div>
    </div>
    `;
    async enter()
    {
      this.simpleTemplate = 'Count #<%= _lcn( counter, { maximumFractionDigits: 0 } ); %>';
      this.app.view.render(
              this.app.container,
              ExampleState.INLINE_TEMPLATE
      );
      this.counter = 990;

      setInterval( this.renderInnerTemplate.bind( this ), 1000 );
    }

    renderInnerTemplate()
    {
      this.app.view.render(
              this.app.container.querySelector( '#innerContainer' ),
              this.simpleTemplate,
              {
                counter : ++this.counter
              }
      );
    }
  }

  // Settings for example environment
  const appSettings = { router : { basePath : "/03-view-and-templates/" } };

  const myApp = new IF.App( document.getElementById( 'app' ), appSettings );
  myApp.states.add( ExampleState );
  myApp.run();