const CLICK_COUNTER = `class ClickCounter extends owl.Component {
    constructor() {
        super(...arguments);
        this.state = { value: 0 };
    }

    increment() {
        this.state.value++;
    }
}

const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({ qweb });
counter.mount(document.body);
`;

const CLICK_COUNTER_XML = `<templates>
   <button t-name="ClickCounter" t-on-click="increment">
      Click Me! [<t t-esc="state.value"/>]
    </button>
</templates>`;

const CLICK_COUNTER_CSS = `button {
    color: darkred;
    font-size: 30px;
    width: 220px;
}`;

const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields
class ClickCounter extends owl.Component {
    state = { value: 0 };

    increment() {
        this.state.value++;
    }
}

const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({ qweb });
counter.mount(document.body);
`;

const WIDGET_COMPOSITION = `// This example will not work if your browser does not support ESNext class fields

class ClickCounter extends owl.Component {
    state = { value: 0 };

    increment() {
        this.state.value++;
    }
}

class InputWidget extends owl.Component {
    state = {text: ""};
    
    updateVal(event) {
        let value = event.target.value;
        if (this.props.reverse) {
            value = value.split("").reverse().join("");
        }
        this.state.text = value
    }
}

// Main root widget
class App extends owl.Component {
    widgets = {ClickCounter, InputWidget};
}

// Application setup
const qweb = new owl.QWeb(TEMPLATES);
const app = new App({ qweb });
app.mount(document.body);
`;

const WIDGET_COMPOSITION_XML = `<templates>
   <button t-name="ClickCounter" t-on-click="increment">
      Click Me! [<t t-esc="state.value"/>]
    </button>

   <div t-name="InputWidget">
     <input t-on-input="updateVal" placeholder="type here some text..."/>
     <span><t t-esc="state.text"/></span>
    </div>

  <div t-name="App">
      <t t-widget="ClickCounter"/>
      <t t-widget="InputWidget" reverse="true"/>
  </div>
</templates>`;

const WIDGET_COMPOSITION_CSS = `button, input {
    font-size: 20px;
    width: 220px;
    margin: 5px;
}`;

const ANIMATION = `// This example will not work if your browser does not support ESNext class fields
class ClickCounter extends owl.Component {
    state = { value: 0 };

    increment() {
        this.state.value++;
    }
}

class App extends owl.Component {
    state = {flag: false, widgetFlag: false, numbers: []};
    widgets = {ClickCounter};

    toggle() {
        this.state.flag = !this.state.flag;
    }

    toggleWidget() {
        this.state.widgetFlag = !this.state.widgetFlag;
    }

    addNumber() {
        const n = this.state.numbers.length + 1;
        this.state.numbers.push(n);
    }

}

const qweb = new owl.QWeb(TEMPLATES);
const app = new App({qweb});
app.mount(document.body);
`;

const ANIMATION_XML = `<templates>
   <button t-name="ClickCounter" t-on-click="increment" class="clickcounter">
      Click Me! [<t t-esc="state.value"/>]
    </button>

    <div t-name="App">

    <h2>Transition on DOM element</h2>

    <div class="demo">
      <button t-on-click="toggle">Toggle square</button>
      <div>
        <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
      </div>
    </div>

    <h2>Transition on sub widgets</h2>

    <div class="demo">
      <button t-on-click="toggleWidget">
       Toggle widget
      </button>
      <div>
        <t t-widget="ClickCounter" t-if="state.widgetFlag" t-transition="fade"/>
      </div>
    </div>

    <h2>Transition on lists</h2>
    <p>Transitions can also be applied on lists</p>
    <div class="demo">
      <button t-on-click="addNumber">Add a number</button>
      <div>
        <t t-foreach="state.numbers" t-as="n">
          <span t-transition="fade" class="numberspan"><t t-esc="n"/></span>
        </t>
      </div>
    </div>

    <h2>Simple CSS animation</h2>
    <p>Remember, normal CSS still apply: for example, a simple flash animation with pure css </p>
    <div><a class="btn flash">Click</a></div>
  </div>
</templates>
`;

const ANIMATION_CSS = `button {
    font-size: 18px;
    height: 35px;
}
.btn {
    cursor: pointer;
    padding: 5px;
    margin: 5px;
    background-color: #dddddd;
}


.flash {
    background-position: center;
    transition: background .6s;
}

.flash:active {
  background-color: gray;
  transition: background 0s;
}


.square {
    background-color: red;
    width: 100px;
    height: 70px;
    color: white;
    margin: 0 20px;
    font-size: 24px;
    line-height: 70px;
    text-align: center;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .6s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.demo {
    display: flex;
    height: 80px;
}

.clickcounter {
    margin-left: 20px;
    height: 50px;
    background-color: blue;
    color: white;
}

.numberspan {
    border: 1px solid green;
    margin: 5px;
    padding: 5px;
}
`;

const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
    constructor() {
        super(...arguments);
        this.state = { n: 0 };
        console.log("constructor");
    }
    async willStart() {
        console.log("willstart");
    }
    mounted() {
        console.log("mounted");
    }
    async willUpdateProps(nextProps) {
        console.log("willUpdateProps", nextProps);
    }
    willPatch() {
        console.log("willPatch");
    }
    patched() {
        console.log("patched");
    }
    willUnmount() {
        console.log("willUnmount");
    }
    increment() {
        this.state.n++;
    }
}

class ParentWidget extends owl.Component {
    constructor() {
        super(...arguments);
        this.widgets = { HookWidget };
        this.state = { n: 0, flag: true };
    }
    increment() {
        this.state.n++;
    }
    toggleSubWidget() {
        this.state.flag = !this.state.flag;
    }
}

const qweb = new owl.QWeb(TEMPLATES);
const widget = new ParentWidget({ qweb });
widget.mount(document.body);
`;

const LIFECYCLE_DEMO_XML = `<templates>
    <div t-name="ParentWidget">
        <button t-on-click="increment">Increment</button>
        <button t-on-click="toggleSubWidget">ToggleSubWidget</button>
        <div t-if="state.flag">
            <t t-widget="HookWidget" n="state.n"/>
        </div>
    </div>
    <div t-name="HookWidget" t-on-click="increment">Demo Sub Widget. Props: <t t-esc="props.n"/>. State: <t t-esc="state.n"/>. (click on me to update me)</div>
</templates>`;

const TODO_APP_STORE = `const ENTER_KEY = 13;
const ESC_KEY = 27;
const LOCALSTORAGE_KEY = "todos-odoo";

//------------------------------------------------------------------------------
// Store Definition
//------------------------------------------------------------------------------
const actions = {
    addTodo({ commit }, title) {
        commit("addTodo", title);
    },
    removeTodo({ commit }, id) {
        commit("removeTodo", id);
    },
    toggleTodo({ state, commit }, id) {
        const todo = state.todos.find(t => t.id === id);
        commit("editTodo", { id, completed: !todo.completed });
    },
    clearCompleted({ state, commit }) {
        state.todos
            .filter(todo => todo.completed)
            .forEach(todo => {
                commit("removeTodo", todo.id);
            });
    },
    toggleAll({ state, commit }, completed) {
        state.todos.forEach(todo => {
            commit("editTodo", {
                id: todo.id,
                completed
            });
        });
    },
    editTodo({ commit }, { id, title }) {
        commit("editTodo", { id, title });
    }
};

const mutations = {
    addTodo({ state }, title) {
        const id = state.nextId++;
        const todo = {
            id,
            title,
            completed: false
        };
        state.todos.push(todo);
    },
    removeTodo({ state }, id) {
        const index = state.todos.findIndex(t => t.id === id);
        state.todos.splice(index, 1);
    },
    editTodo({ state }, { id, title, completed }) {
        const todo = state.todos.find(t => t.id === id);
        if (title !== undefined) {
            todo.title = title;
        }
        if (completed !== undefined) {
            todo.completed = completed;
        }
    }
};

function makeStore() {
    const todos = JSON.parse(
        window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
    );
    const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
    const state = {
        todos,
        nextId
    };
    const store = new owl.Store({
        state,
        actions,
        mutations
    });
    store.on("update", null, () => {
        const state = JSON.stringify(store.state.todos);
        window.localStorage.setItem(LOCALSTORAGE_KEY, state);
    });
    return store;
}

//------------------------------------------------------------------------------
// TodoItem
//------------------------------------------------------------------------------
class TodoItem extends owl.Component {
    state = { isEditing: false };

    removeTodo() {
        this.env.dispatch("removeTodo", this.props.id);
    }

    toggleTodo() {
        this.env.dispatch("toggleTodo", this.props.id);
    }

    async editTodo() {
        this.state.isEditing = true;
    }

    focusInput() {
        this.refs.input.value = "";
        this.refs.input.focus();
        this.refs.input.value = this.props.title;
    }

    handleKeyup(ev) {
        if (ev.keyCode === ENTER_KEY) {
            this.updateTitle(ev.target.value);
        }
        if (ev.keyCode === ESC_KEY) {
            ev.target.value = this.props.title;
            this.state.isEditing = false;
        }
    }

    handleBlur(ev) {
        this.updateTitle(ev.target.value);
    }

    updateTitle(title) {
        const value = title.trim();
        if (!value) {
            this.removeTodo(this.props.id);
        } else {
            this.env.dispatch("editTodo", {
                id: this.props.id,
                title: value
            });
            this.state.isEditing = false;
        }
    }
}

//------------------------------------------------------------------------------
// TodoApp
//------------------------------------------------------------------------------
function mapStoreToProps(state) {
    return {
        todos: state.todos
    };
}

class TodoApp extends owl.Component {
    widgets = { TodoItem };
    state = { filter: "all" };

    get visibleTodos() {
        let todos = this.props.todos;
        if (this.state.filter === "active") {
            todos = todos.filter(t => !t.completed);
        }
        if (this.state.filter === "completed") {
            todos = todos.filter(t => t.completed);
        }
        return todos;
    }

    get allChecked() {
        return this.props.todos.every(todo => todo.completed);
    }

    get remaining() {
        return this.props.todos.filter(todo => !todo.completed).length;
    }

    get remainingText() {
        const items = this.remaining < 2 ? "item" : "items";
        return \` \${items} left\`;
    }

    addTodo(ev) {
        if (ev.keyCode === ENTER_KEY) {
            const title = ev.target.value;
            if (title.trim()) {
                this.env.dispatch("addTodo", title);
            }
            ev.target.value = "";
        }
    }

    clearCompleted() {
        this.env.dispatch("clearCompleted");
    }

    toggleAll() {
        this.env.dispatch("toggleAll", !this.allChecked);
    }

    setFilter(filter) {
        this.state.filter = filter;
    }
}

const ConnectedTodoApp = owl.connect(TodoApp, mapStoreToProps);

//------------------------------------------------------------------------------
// App Initialization
//------------------------------------------------------------------------------
const store = makeStore();
const qweb = new owl.QWeb(TEMPLATES);
const env = {
    qweb,
    store,
    dispatch: store.dispatch.bind(store),
};
const app = new ConnectedTodoApp(env);
app.mount(document.body);
`;

const TODO_APP_STORE_XML = `<templates>
  <section t-name="TodoApp" class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
    </header>
    <section class="main" t-if="props.todos.length">
      <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="toggleAll"/>
      <label for="toggle-all"></label>
      <ul class="todo-list">
        <t t-foreach="visibleTodos" t-as="todo">
          <t t-widget="TodoItem" t-key="todo.id" id="todo.id" completed="todo.completed" title="todo.title"/>
        </t>
      </ul>
    </section>
    <footer class="footer" t-if="props.todos.length">
      <span class="todo-count">
        <strong>
            <t t-esc="remaining"/>
        </strong>
        <t t-esc="remainingText"/>
      </span>
      <ul class="filters">
        <li>
          <a t-on-click="setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
        </li>
        <li>
          <a t-on-click="setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
        </li>
        <li>
          <a t-on-click="setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
        </li>
      </ul>
      <button class="clear-completed" t-if="props.todos.length gt remaining" t-on-click="clearCompleted">
        Clear completed
      </button>
    </footer>
  </section>

  <li t-name="TodoItem" class="todo" t-att-class="{completed: props.completed, editing: state.isEditing}">
    <div class="view">
      <input class="toggle" type="checkbox" t-on-change="toggleTodo" t-att-checked="props.completed"/>
      <label t-on-dblclick="editTodo">
        <t t-esc="props.title"/>
      </label>
      <button class="destroy" t-on-click="removeTodo"></button>
    </div>
    <input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-mounted="focusInput" t-on-blur="handleBlur"/>
  </li>
</templates>`;

const TODO_APP_STORE_CSS = `html,
body {
  margin: 0;
  padding: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

.hidden {
  display: none;
}

.todoapp {
  background: #fff;
  margin: 130px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

.todoapp input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

.todoapp input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

.todoapp h1 {
  position: absolute;
  top: -155px;
  width: 100%;
  font-size: 100px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.15);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.new-todo {
  padding: 16px 16px 16px 60px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
  position: relative;
  z-index: 2;
  border-top: 1px solid #e6e6e6;
}

.toggle-all {
  width: 1px;
  height: 1px;
  border: none; /* Mobile Safari */
  opacity: 0;
  position: absolute;
  right: 100%;
  bottom: 100%;
}

.toggle-all + label {
  width: 60px;
  height: 34px;
  font-size: 0;
  position: absolute;
  top: -52px;
  left: -13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.toggle-all + label:before {
  content: "❯";
  font-size: 22px;
  color: #e6e6e6;
  padding: 10px 27px 10px 27px;
}

.toggle-all:checked + label:before {
  color: #737373;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list li.editing {
  border-bottom: none;
  padding: 0;
}

.todo-list li.editing .edit {
  display: block;
  width: calc(100% - 43px);
  padding: 12px 16px;
  margin: 0 0 0 43px;
}

.todo-list li.editing .view {
  display: none;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}

.todo-list li .toggle {
  opacity: 0;
}

.todo-list li .toggle + label {
  /*
		Firefox requires \`#\` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the \`#\` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-list li .toggle:checked + label {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}

.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
  color: #af5b5e;
}

.todo-list li .destroy:after {
  content: "×";
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.clear-completed:hover {
  text-decoration: underline;
}

.info {
  margin: 65px auto 0;
  color: #bfbfbf;
  font-size: 10px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.info a:hover {
  text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: 10px;
  }
}

.filters a {
    cursor: pointer;
}
`;

const RESPONSIVE = `class Navbar extends owl.Component {}

class ControlPanel extends owl.Component {
    widgets = { MobileSearchView };
}

class FormView extends owl.Component {
    widgets = { AdvancedWidget };
}

class AdvancedWidget extends owl.Component {}

class Chatter extends owl.Component {}

class MobileSearchView extends owl.Component {}


class App extends owl.Component {
    widgets = { Navbar, ControlPanel, FormView, Chatter };
}

function isMobile() {
    return window.innerWidth <= 768;
}

const env = {
    qweb: new owl.QWeb(TEMPLATES),
    isMobile: isMobile()
};

const app = new App(env);
app.mount(document.body);

function updateEnv() {
    const _isMobile = isMobile();
    if (_isMobile !== env.isMobile) {
        app.updateEnv({
            isMobile: _isMobile
        });
    }
}

window.addEventListener("resize", owl.utils.debounce(updateEnv, 20));
`;

const RESPONSIVE_XML = `<templates>
    <div t-name="Navbar" class="navbar">Navbar</div>

    <div t-name="ControlPanel" class="controlpanel">
        <h2>controlpanel</h2>
        <t t-if="env.isMobile" t-widget="MobileSearchView"/>
    </div>

    <div t-name="FormView" class="formview">
      <h2>formview</h2>
        <t t-if="!env.isMobile" t-widget="AdvancedWidget"/>
    </div>

    <div t-name="Chatter" class="chatter">
      <h2>Chatter</h2>
      <t t-foreach="100" t-as="item"><div>Message <t t-esc="item"/></div></t>
    </div>

    <div t-name="MobileSearchView">MOBILE searchview</div>

    <div t-name="App" class="app" t-att-class="{mobile: env.isMobile, desktop: !env.isMobile}">
        <t t-widget="Navbar"/>
        <t t-widget="ControlPanel"/>
        <div class="content-wrapper" t-if="!env.isMobile">
          <div class="content">
            <t t-widget="FormView"/>
            <t t-widget="Chatter"/>
          </div>
        </div>
        <t t-else="1">
          <t t-widget="FormView"/>
          <t t-widget="Chatter"/>
        </t>

    </div>
    <div t-name="AdvancedWidget">
        This widget is only created in desktop mode.
        <button>Button!</button>
    </div>
</templates>
`;

const RESPONSIVE_CSS = `body {
    margin: 0;
}

.app {
    height: 100%;
    flex-direction: column;
}

.app.desktop {
    display: flex;
}
.navbar {
    flex: 0 0 30px;
    height: 30px;
    background-color: cadetblue;
    color: white;
    line-height: 30px;
}

.controlpanel {
    flex: 0 0 100px;
    height: 100px;
    background-color: #dddddd;
    padding: 8px;
}

.content-wrapper {
    flex: 1 1 auto;
    position: relative;
}

.content {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.formview {
    overflow-y: auto;
    flex: 1 1 60%;
    min-height: 200px;
    padding: 8px;
}

.chatter {
    overflow-y: auto;
    flex: 1 1 40%;
    background-color: #eeeeee;
    color: #333333;
    padding: 8px;
}
`;

const SLOTS = `// This example will not work if your browser does not support ESNext class fields

// We show here how slots can be used to create generic components. In this
// example, the Card component is basically only a container, and is created
// by giving it slots, inside the t-widget directive.

class Card extends owl.Component {
    state = { fullDisplay: true };

    toggleDisplay() {
        this.state.fullDisplay = !this.state.fullDisplay;
    }
}

class Counter extends owl.Component {
    state = {val: 1};

    inc() {
        this.state.val++;
    }
}

// Main root widget
class App extends owl.Component {
    widgets = {Card, Counter};
    state = {a: 1, b: 3};

    inc(key, delta) {
        this.state[key] += delta;
    }
}

// Application setup
const qweb = new owl.QWeb(TEMPLATES);
const app = new App({ qweb });
app.mount(document.body);`;

const SLOTS_XML = `<templates>
  <div t-name="Card" class="card" t-att-class="state.fullDisplay ? 'full' : 'small'">
    <div class="card-title">
      <t t-esc="props.title"/><button t-on-click="toggleDisplay">Toggle</button>
    </div>
    <t t-if="state.fullDisplay">
      <div class="card-content" >
        <t t-slot="content"/>
      </div>
      <div class="card-footer">
        <t t-slot="footer"/>
      </div>
    </t>
  </div>

  <div t-name="Counter">
    <t t-esc="state.val"/><button t-on-click="inc">Inc</button>
  </div>

  <div t-name="App" class="main">
    <t t-widget="Card" title="'Title card A'">
      <t t-set="content">Content of card 1...  [<t t-esc="state.a"/>]</t>
      <t t-set="footer"><button t-on-click="inc('a', 1)">Increment A</button></t>
    </t>
    <t t-widget="Card"  title="'Title card B'">
      <div t-set="content">
        <div>Card 2... [<t t-esc="state.b"/>]</div>
        <t t-widget="Counter"/>
      </div>
      <t t-set="footer"><button t-on-click="inc('b', -1)">Decrement B</button></t>
    </t>
  </div>
</templates>`;

const SLOTS_CSS = `.main {
    display: flex;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: #eeeeee;
    width: 200px;
    height: 100px;
    margin: 10px;
    border: 1px solid gray;
}

.card.full {
    height: 100px;
}

.card.small {
    height: 25px;
}

.card-title {
    flex: 0 0 25px;
    font-weight: bold;
    background-color: darkcyan;
    color: white;
    padding: 2px;
}

.card-title button {
    float: right;
}

.card-content {
    flex: 1 1 auto;
    padding: 5px;
    border-top: 1px solid white;
}

.card-footer {
    border-top: 1px solid white;
}`;

const ASYNC_COMPONENTS = `// This example will not work if your browser does not support ESNext class fields

// In this example, we have 2 sub widgets, one of them being async. However, we don't want renderings
// of the sync sub widget to be delayed because of the async one. We use the 't-async' directive for
// this purpose.

class App extends owl.Component {
    widgets = {AsyncChild, NotificationManager};
    state = { value: 0 };

    increment() {
        this.state.value++;
        this.refs.notificationManager.notify("Value will be set to " + this.state.value);
    }
}

class AsyncChild extends owl.Component {
    willUpdateProps() {
        // simulate a widget that needs to perform async stuff (e.g. an RPC)
        // with the updated props before re-rendering itself
        return new Promise(function (resolve) {
            setTimeout(resolve, 1000);
        });
    }
}

class NotificationManager extends owl.Component {
    state = { notifs: [] };

    notify(notif) {
        this.state.notifs.push(notif);
        setTimeout(() => {
            var index = this.state.notifs.indexOf(notif);
            this.state.notifs.splice(index, 1);
        }, 3000);
    }
}

const qweb = new owl.QWeb(TEMPLATES);
const app = new App({ qweb });
app.mount(document.body);`;

const ASYNC_COMPONENTS_XML = `<templates>
  <div t-name="App" class="app">
    <button t-on-click="increment">Increment</button>
    <t t-widget="AsyncChild" t-async="1" value="state.value"/>
    <t t-widget="NotificationManager" t-ref="notificationManager"/>
  </div>

  <div class="value" t-name="AsyncChild">
    Current value: <t t-esc="props.value"/>
  </div>

  <div class="notification_manager" t-name="NotificationManager">
    <t t-foreach="state.notifs" t-as="notif">
      <div class="notification"><t t-esc="notif"/></div>
    </t>
  </div>
</templates>`;

const ASYNC_COMPONENTS_CSS = `.app {
    width: 70%;
}

button {
    color: darkred;
    font-size: 30px;
    width: 220px;
}

.value {
    font-size: 26px;
    padding: 20px;
}

.notification_manager {
    position: absolute;
    top: 0;
    right: 0;
}
.notification {
    width: 150px;
    margin: 4px 8px;
    padding: 16px;
    border: 1px solid: black;
    background-color: lightgray;
}`;

const EMPTY = `class App extends owl.Component {
}

const qweb = new owl.QWeb(TEMPLATES);
const app = new App({qweb});
app.mount(document.body);
`;

const FORM = `class Form extends owl.Component {
    state = {
        text: "",
        othertext: "",
        number: 11,
        color: "",
        bool: false
    };
}

const qweb = new owl.QWeb(TEMPLATES);
const form = new Form({ qweb });
form.mount(document.body);
`;

const FORM_XML = `<templates>
   <div t-name="Form">
        <h1>Form</h1>
        <div>
          Text (immediate): <input t-model="text"/>
        </div>
        <div>
          Other text (lazy): <input t-model.lazy="othertext"/>
        </div>
        <div>
          Number: <input  t-model.number="number"/>
        </div>
        <div>
          Boolean: <input  type="checkbox" t-model="bool"/>
        </div>
        <div>
          Color, with a select: <select  t-model="color">
            <option value="">Select a color</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
          </select>
        </div>
        <div>
          Color, with radio buttons:
            <span><input type="radio" name="color" id="red" value="red" t-model="color"/><label for="red">Red</label></span>
            <span><input type="radio" name="color" id="blue" value="blue" t-model="color"/><label for="blue">Blue</label></span>
        </div>

        <hr/>
        <h1>State</h1>
        <div>Text: <t t-esc="state.text"/></div>
        <div>Other Text: <t t-esc="state.othertext"/></div>
        <div>Number: <t t-esc="state.number"/></div>
        <div>Boolean: <t t-if="state.bool">True</t><t t-else="1">False</t></div>
        <div>Color: <t t-esc="state.color"/></div>
    </div>
</templates>
`;

export const SAMPLES = [
  {
    description: "Click Counter",
    code: CLICK_COUNTER,
    xml: CLICK_COUNTER_XML,
    css: CLICK_COUNTER_CSS
  },
  {
    description: "Click Counter (ESNext)",
    code: CLICK_COUNTER_ESNEXT,
    xml: CLICK_COUNTER_XML,
    css: CLICK_COUNTER_CSS
  },
  {
    description: "Form input bindings",
    code: FORM,
    xml: FORM_XML,
  },
  {
    description: "Widget Composition",
    code: WIDGET_COMPOSITION,
    xml: WIDGET_COMPOSITION_XML,
    css: WIDGET_COMPOSITION_CSS
  },
  {
    description: "Animations",
    code: ANIMATION,
    xml: ANIMATION_XML,
    css: ANIMATION_CSS
  },
  {
    description: "Lifecycle demo",
    code: LIFECYCLE_DEMO,
    xml: LIFECYCLE_DEMO_XML
  },
  {
    description: "Todo List App (with store)",
    code: TODO_APP_STORE,
    css: TODO_APP_STORE_CSS,
    xml: TODO_APP_STORE_XML
  },
  {
    description: "Responsive app",
    code: RESPONSIVE,
    css: RESPONSIVE_CSS,
    xml: RESPONSIVE_XML
  },
  {
    description: "Slots",
    code: SLOTS,
    xml: SLOTS_XML,
    css: SLOTS_CSS
  },
  {
    description: "Asynchronous components",
    code: ASYNC_COMPONENTS,
    xml: ASYNC_COMPONENTS_XML,
    css: ASYNC_COMPONENTS_CSS
  },
  {
    description: "Empty",
    code: EMPTY
  }
];