{% extends "base.html" %}

{% block title %}Vote Submitted - HKFC MOTM System{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card border-success">
      <div class="card-body text-center">
        <div class="mb-4">
          <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
        </div>
        
        <h1 class="card-title text-success">Vote Submitted Successfully!</h1>
        
        <div class="alert alert-success">
          <h5 class="alert-heading">
            <i class="fas fa-thumbs-up me-2"></i>Thank you for voting
          </h5>
          <p class="mb-0">
            Smithers' army of Internet monkeys will now go about adding up the votes...
          </p>
        </div>
        
        <div class="mb-4">
          <img src="{{ simpsons_image_url }}" 
               alt="Counting votes" 
               class="img-fluid rounded"
               style="max-height: 300px;"
               onerror="this.src='/static/images/simpsons-monkeys.jpg';">
        </div>
        
        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
          <a href="/" class="btn btn-primary">
            <i class="fas fa-home me-2"></i>Back to Home
          </a>
          <a href="/motm/comments" class="btn btn-info">
            <i class="fas fa-comments me-2"></i>View Comments
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}