1  {{>modal}}
  2  <section id="main" class="wrapper style2">
  3  	<div id="admin_pane" class="inner">
  4  		<header class="major special" style="padding-bottom: 0">
  5  			<h1>Admin Page</h1>
  6  		</header>
  7  		<h2>Welcome, {{ session.account.profile.display_name }}</h2>
  8  		<ul id="admin_buttons" class="actions">
  9  			<li><a class="button" hx-target="#mgmt_panel" hx-swap="show:#mgmt_anchor:top" hx-get="admin/events/" æ-tab>Events</a></li>
 10  			<li><a class="button" hx-target="#mgmt_panel" hx-swap="show:#mgmt_anchor:top" hx-get="admin/places/" æ-tab>Places</a></li>
 11  			<li><a class="button" hx-target="#mgmt_panel" hx-swap="show:#mgmt_anchor:top" hx-get="admin/menu/" æ-tab>Menu</a></li>
 12  			<li><a class="button" hx-target="#mgmt_panel" hx-swap="show:#mgmt_anchor:top" hx-get="admin/finances/" æ-tab>Finances</a></li>
 13  		</ul>
 14          <div id="mgmt_anchor" style="transform: translateY(-5em)"></div>
 15          <div id="mgmt_panel"></div>
 16  
 17  		<!--<section id="food" class="hidden">
 18  			<form id="new_menu_item" method="post" action="{{ path }}menu" enctype="multipart/form-data">
 19  				<div class="row gtr-uniform">
 20  					<img id="menu_image" src="{{ static }}images/cred.png" />
 21  					<div class="col-6 col-12-xsmall">
 22  						<label for="img">Upload an image</label><br/>
 23  						<input type="file" id="img"  name="img" accept="images/*" />
 24  					</div>
 25  					<div class="col-4 col-12-xsmall">
 26  						<input type="text" name="title" placeholder="Item name" required />
 27  					</div>
 28  					<div class="col-4 col-12-xsmall">
 29  						<input type="text" name="price" pattern="[0-9]+" placeholder="How many Credensos is this valued at?" />
 30  					</div>
 31  					<div class="col-4 col-12-xsmall">
 32  						<select name="category">
 33  							<option value="food">Food</option>
 34  							<option value="drink">Drink</option>
 35  							<option value="other">Other</option>
 36  						</select>
 37  					</div>
 38  					<div class="col-12">
 39  						<textarea name="content" rows=3 placeholder="Describe what you're offering or requesting" required></textarea>
 40  					</div>
 41  					<div class="col-12">
 42  						<ul class="actions">
 43  							<li><input type="submit" value="Post item" /></li>
 44  						</ul>
 45  					</div>
 46  				</div>
 47  			</form>
 48  		</section>
 49  		<section id="finances" class="hidden">
 50  			<h3>Record cashflow</h3>
 51  			<form id="new_menu_item" method="post" action="{{ path }}finances" enctype="multipart/form-data">
 52  				<div class="row gtr-uniform">
 53  					<div class="col-4 col-12-xsmall">
 54  						<input type="date" name="date" placeholder="Item name" required />
 55  					</div>
 56  					<div class="col-4 col-12-xsmall">
 57  						<input type="text" name="amount" pattern="[-0-9]+" placeholder="Donation value" required />
 58  					</div>
 59  					<div class="col-4 col-12-xsmall">
 60  						<input type="text" name="link" placeholder="Link to the donator's webpage" />
 61  					</div>
 62  					<div class="col-12">
 63  						<input type="text" name="description" placeholder="What is this about?" required />
 64  					</div>
 65  					<div class="col-12">
 66  						<ul class="actions">
 67  							<li><input type="submit" value="Add record" /></li>
 68  						</ul>
 69  					</div>
 70  				</div>
 71  			</form>
 72  		</section>
 73          -->
 74  
 75  		<section id="calendar" class="hidden">
 76              		{{>admin/events}}
 77  		</section>
 78  	</div>
 79  </section>
 80  <script>
 81      æ('tab').forEach(tab => {
 82          tab.listen('click', (e) => tab.solo('primary'))
 83      })
 84  	//const buttons = document.querySelector('#admin_buttons')
 85  
 86  	//const click = (e) => {
 87  	//	e.preventDefault()
 88  	//	const id = e.target.hash
 89  	//	document.querySelectorAll('#admin_pane section').forEach(section => {
 90  	//		section.classList.add('hidden')
 91  	//	})
 92  
 93  	//	buttons.querySelectorAll('a').forEach(link => {
 94  	//		link.classList.remove('primary')
 95  	//	})
 96  
 97  	//	document.querySelector(id).classList.remove('hidden')
 98  	//	buttons.querySelector(`[href='${id}']`).classList.add('primary')
 99  	//}
100  
101  	//buttons.querySelectorAll('a').forEach(link => {
102  	//	link.addEventListener('click', click)
103  	//})
104  
105  	//const previewMenuImage = (e) => {
106  	//	console.log('Previewing image')
107  	//	const file = e.target.files[0]
108  
109  	//	if (file !== undefined) {
110  	//		const img = document.getElementById('menu_image')
111  	//		img.src = URL.createObjectURL(file)
112  	//		img.alt = file.name
113  	//	}
114  	//}
115  
116  	//document.getElementById('img').addEventListener('change', previewMenuImage)
117  
118  	//const menu_form = document.querySelector('#new_menu_item')
119  	//menu_form.addEventListener('submit', async (e) => {
120  	//	window.location.hash = ""
121  	//	const data = new FormData(nm_form)
122  	//	const response = await fetch('market', {
123  	//		method: "POST",
124  	//		body: data
125  	//	})
126  
127  	//	window.location.reload()
128  	//})
129  
130  </script>
131  <style>
132  .hidden {
133  	display: none;
134  }
135  
136  #menu_image {
137  	width: 100%;
138  	max-width: 30em;
139  }
140  </style>
141