<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

				.navbar {
						display: flex;
						justify-content: space-between; 
						align-items: center; 
						background-color:rgba(255,90,71,0.5) ;
						padding: 14px 16px; 
						font-family: Arial, sans-serif;
				}


				.navbar a {
						color: white; 
						text-decoration: none; 
						padding: 10px 15px; 
						font-size: 16px;
						transition: background-color 0.3s; 
				}


				.navbar a:hover {
						background-color: blue; 
						border-radius: 5px; 
				}
			.box {
					display: block;
					width: 150px;
					height: 50px;
					background-color: pink;
					border: 2px dashed red;
					padding: 5px;
					margin: 5px;
			}


* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  
}


td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
  




</style>
</head>
<body>


<body>


		<nav class="navbar">
				<div class="nav-links">
						<a href="#home.html">Home</a>
						<a href="#advicepage">Advice</a>
						<a href="#clubpage">clubpage</a>
						<a href="#settings">settings</a>
				</div>
		</nav>

	<h1>NE TRACK</h1>
	<button>friends </button>
	 <input type="text" placeholder="Search.."><br>
	<h3> PROFILE </h3>

	<!--- sql querey for the search runs through the origonal database--->
	<!---reorder friends bar maybe make a list-->

<div class="row">
  <div class="column" style="background-color:rgb(248, 245, 245);">
  
  <h3>competitions</h3>

	<span class="box"> past competitions</span>
	<button>add competitons</button>
	<span class="box">upcoming competitions</span>
	<button>add upcoming competitons</button>

	<h3>training groups</h3>
	<label for="numInputs">Enter how many training groups you are in : </label>
	<input type="number" id="numInputs" min="1" placeholder="Enter a number">
	<button onclick="generateInputs()">Generate</button>

	<div class="input-container" id="inputContainer">
	</div>
	<script>
			function generateInputs() {
					const numInputs = document.getElementById('numInputs').value;
					const container = document.getElementById('inputContainer');
					container.innerHTML = '';
					for (let i = 0; i < numInputs; i++) {
							const input = document.createElement('input');
							input.type = 'text';
							input.placeholder = `Input ${i + 1}`;
							input.style.marginBottom = '5px';
							container.appendChild(input);
							container.appendChild(document.createElement('br'));
					}
			}
	</script>

	<h3>events and personal bests </h3>
	<label for="numInputs">Enter how events you compete in : </label>
	<input type="number" id="numInputs" min="1" placeholder="Enter a number">
	<button onclick="generateInputs2()">Generate</button>
	<div class="input-container" id="inputContainer">
	</div>
	<script>
		function generateInputs2() {
				const numInputs = document.getElementById('numInputs').value;
				const container = document.getElementById('inputContainer');
				container.innerHTML = ''; 
				const rows = Math.ceil(numInputs / 2);

				for (let i = 0; i < rows; i++) {
						const row = document.createElement('div');
						row.style.display = 'flex';
						row.style.marginBottom = '5px';
						for (let j = 0; j < 2; j++) {
								const index = i * 2 + j; 
								if (index >= numInputs) break; 
								const input = document.createElement('input');
								input.type = 'text';
								input.placeholder = `Input ${index + 1}`;
								input.style.marginRight = '10px';
								row.appendChild(input);
						}
						container.appendChild(row);
				}
		}


	</script>
	<button> view training memos</button>
  </div>
  <div class="column" style="background-color:rgb(248, 245, 245);">
    <h2>Next Events</h2>
    <table style="width:100%; border-collapse: collapse;">
        <tr>
            <th>Event</th>
            <th>Date</th>
            <th>Location</th>
            <th>Going?</th>
        </tr>
        {% for event in events %}
        <tr>
            <td>{{ event.event_name }}</td>
            <td>{{ event.event_date }}</td>
            <td>{{ event.location }}</td>
            <td>
                <form action="/update_attendance" method="POST">
                    <input type="hidden" name="event_id" value="{{ event.id }}">
                    <input type="checkbox" name="attending" value="1" 
                           {% if event.attending %}checked{% endif %}
                           onclick="this.form.submit()">
                </form>
            </td>
        </tr>
        {% endfor %}
    </table>

  </div>
</div>

</body>
</html>