<import: src="modals">
<import: src="tasks">
<import: src="header">
<import: src="alerts">
<import: src="avatar">
<import: src="rewards">
<import: src="footer">
<import: src="settings">
<import: src="party">
<import: src="pets">
<import: src="game-pane">
<import: src="filters">

<Title:>
  HabitRPG | Gamify Your Life

<Head:>
  <!-- webfonts -->
  <link href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>

  <meta name="viewport" content="width=device-width">
  <meta name="apple-mobile-web-app-capable" content="yes">

<Header:>
  <app:modals:modals />
  <ui:connectionAlert>
  <div class="header-wrap">

    {#if _undo}<a x-bind="click:undo" class='label undo-button'>Undo</a>{/}

    <app:settings:menu />
    <app:header:header />
  </div>
  <span class='{#if _gamePane}hidden{/}'><app:filters:filters /></span>

<Body:>
  <br/>
  <div id="notification-area"></div>
  <div id="wrap">
    <app:alerts:flash />
    {#if _user.preferences.hideHeader}<app:settings:menu />{/} <!-- if they hide the header, we still need user-menu visible -->
    <div id="exp-chart" style="display:none;"></div>

    <div id=main class="grid">
        <div class='{#if _gamePane}hidden{/}'>
            <app:tasks:task-lists
                    habits={_habitList}
                    dailys={_dailyList}
                    todos={_todoList}
                    rewards={_rewardList}
                    main=true
                    editable=true />
        </div>
        <div class='{#unless _gamePane}hidden{/}'>
            <app:game-pane:main />
        </div>
    </div>
  </div>
  <app:footer:footer />
