<template>
  <div class="voting-container">
    <h1>Cast Your Vote</h1>
    <div v-if="!voted">
      <input v-model="admissionNumber" placeholder="Student Admission Number" />
      <!-- Candidate selection will go here -->
      <button @click="submitVote">Submit Vote</button>
    </div>
    <div v-else>
      <h2>Thank you for voting!</h2>
      <button @click="reset">Next Voter</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const admissionNumber = ref('');
const voted = ref(false);

const submitVote = () => {
  if (admissionNumber.value) {
    // TODO: Send vote to backend
    console.log(`Vote submitted for ${admissionNumber.value}`);
    voted.value = true;
  }
};

const reset = () => {
  admissionNumber.value = '';
  voted.value = false;
};
</script>

<style scoped>
.voting-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
</style>
