<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/icon" href="favicon.ico">
<link rel="apple-touch-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="app to track your calories fast" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" type="text/css" href="/vendor/css/materialize.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" href="/css/layout.css" />
<script src="/vendor/js/materialize.js"></script>
<title>Fast Calorie</title>
</head>
<body>
<div id="app">
<div class="layout-app">
<header class="layout-header">
<nav>
<div class="nav-wrapper brown">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<a href="/" class="brand-logo">Fast Calorie</a>
<ul id="nav" class="right">
<li class="datepicker" style="margin-right: 1rem;">
<i class="material-icons">date_range</i>
</li>
</ul>
</div>
</nav>
</header>
<main class="layout-content">
<!-- Side Menu -->
<ul id="slide-out" class="sidenav">
<li class="brown">
<a href="#!"><i class="material-icons">home</i>Fast Calorie</a>
</li>
<li class="brown">
<div class="user-view">
<div style="min-height: 6rem;">
<!-- <img src="images/office.jpg"> -->
</div>
<a href=""><span class="white-text name">Version 0.0.0</span></a>
<a href=""><span class="white-text email">©2020 Geoff Doty</span></a>
</div>
</li>
<li>
<div class="divider"></div>
</li>
<li><a href="#!" data-target="weightModal" class="modal-trigger"><i class="material-icons">input</i>Log Weight</a></li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Reports</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">trending_down</i>Calories</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">trending_down</i>Weight</a></li>
<li>
<div class="divider"></div>
</li>
<li><a class="waves-effect" href="#!"><i class="material-icons">info_outline</i>About</a></li>
<li ><a class="waves-effect" href="#!"><i class="material-icons">settings</i>Settings</a></li>
</ul>
<section class="section">
<div class="row">
<div class="col s2 selectable" @click="back">
<i class="material-icons">chevron_left</i>
</div>
<div class="col s8 center" @click="today"><h5 class="marginless">{this.current.date}</h5> </div>
<div class="col s2 selectable" @click="forward">
<i class="material-icons right">chevron_right</i>
</div>
</div>
<div class="row">
<div class="col s4 center">
<strong>Cals Left</strong>
<p>{this.left}</p>
</div>
<div class="col s4 center">
<strong>Goal</strong>
<p>{this.settings.goal}</p>
</div>
<div class="col s4 center">
<strong>Used</strong>
<p>{this.used}</p>
</div>
</div>
</section>
<section>
<form id="entry" action="">
<div class="row">
<div class="col s8" style="padding-left: 2rem">
<label for="">Calories</label>
<input type="number" id="calories" placeholder="Item Calories" @keyup="search">
</div>
<div class="col s4 center" style="line-height: 72px;">
<button class="btn green" @click="save" style="margin-bottom:-12px">Add Calories</button>
</div>
</div>
<div :if="this.choices.length" class="collection ">
<div :for="item, i in this.choices" class="row collection-item" idx="{i}">
<div class="col s2 grey-text text-lighten-1" idx="{i}">{item.type}</div>
<div class="col s8" idx="{i}">{item.name} - <em>{item.description}</em></div>
<div class="col s2" idx="{i}">
<button class="btn brown right" idx="{i}" @click="order">
Add
<i class="material-icons left">add_circle_outline</i>
</button>
</div>
</div>
</div>
</form>
</section>
<div class="divider"></div>
<section :if="this.current.entries.length">
<ul class="collection with-header">
<li class="collection-header">
<h5>Today's Entries<span class="right" style="margin-right: 1rem;">{this.current.entries.length}</span></h5>
</li>
<li :for="entry, i in this.current.entries" idx="{i}" class="collection-item row modal-trigger" @click="details"
data-target="detailsModal">
<div class="col s2 grey-text text-lighten-1" idx="{i}">{entry.type}</div>
<div class="col s8" idx="{i}">{entry.name || 'Add Entry Description'}</div>
<div class="col s2">
<span class="right" idx="{i}">{entry.value}</span>
</div>
</li>
</ul>
<div class="divider"></div>
<div class="row">
<div class="col s8"></div>
<div class="col s2 center">
<h6><strong>Total</strong></h6>
</div>
<h6 class="col s2"><span class="right" style="margin-right: 1rem;">{this.used}</span> </h6>
</div>
</section>
</main>
<footer class="layout-footer orange">
<div class="container">
</div>
<div class="footer-copyright">
<div class="container">
© 2020 Negative9.NET
<a class="grey-text text-lighten-4 right" href="#!" @click="populate">Populate</a>
</div>
</div>
<div class="container">
</div>
</footer>
</div>
<!-- Modal Structure -->
<div id="detailsModal" class="modal">
<div class="modal-content">
<h4>Entry Details</h4>
<p>
<table>
<tr>
<th>Name</th>
<td>{this.current.entry.name}</td>
</tr>
<tr>
<th>Calories</th>
<td>{this.current.entry.value}</td>
</tr>
</table>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
<button class="btn red" @click="remove" idx="{this.current.entry.idx}">Remove Entry</button>
</div>
</div>
<div id="weightModal" class="modal">
<div class="modal-content">
<h4 class="center">Log Weight</h4>
<div class="row">
<div class="col s2"></div>
<div class="col s8 center">
<h6 class="marginless">{this.current.date}</h6>
</div>
<div class="col s2"></div>
</div>
<p>
<table>
<tr>
<th>Weight</th>
<td>
<!-- TODO: should show last weight -->
<input id="weight" type="number" placeholder="100" >
</td>
</tr>
</table>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
<button class="btn red" @click="addWeight">Log Weight</button>
</div>
</div>
</div>
<script type="module" src="/js/index.js"></script>
</body>
</html>