<!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="/" 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">
<section class="section">
<div class="row">
<div class="col s2"></div>
<div class="col s8 center"><h5 class="marginless">{this.date}</h5> </div>
<div class="col s2 right"></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">
<label for="">Name</label>
<input type="text" id="name" placeholder="Item Description (optional)">
</div>
<div class="col s4">
<label for="">Calories</label>
<input type="number" id="calories" placeholder="Item Calories" @keyup="search">
</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>
<div class="row">
<div class="col right">
<button class="btn green" @click="save">Add Calories</button>
</div>
</div>
</form>
</section>
<div class="divider"></div>
<section :if="this.history.length">
<ul class="collection with-header">
<li class="collection-header">
<h5>Today's Entries<span class="right" style="margin-right: 1rem;">{this.history.length}</span></h5>
</li>
<li :for="entry, i in this.history" 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="#!">More Links</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.selected.name}</td>
</tr>
<tr>
<th>Calories</th>
<td>{this.selected.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.selected.idx}">Remove Entry</button>
</div>
</div>
</div>
<script type="module" src="/js/index.js"></script>
</body>
</html>