{% extends "base.html" %}

{% block content %}
<div class="max-w-md mx-auto my-8">
  <div class="bg-white p-8 rounded-lg shadow-md">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">Join Request - {{ team.name }}</h1>
      <a href="/teams/{{ team.id }}" class="text-irish-green hover:underline">Back to Team</a>
    </div>

    {% if error %}
      <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
        <p>{{ error }}</p>
      </div>
    {% endif %}
    
    {% if is_open %}
      <div class="text-center">
        <div class="bg-green-100 p-4 rounded-md mb-6">
          <p class="text-green-800">
            <i class="fas fa-info-circle mr-2"></i>
            This is an open team. You can join immediately without approval.
          </p>
        </div>
        
        <form action="/teams/join/{{ team.id }}" method="post">
          <button type="submit" class="bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition w-full">
            Join Now
          </button>
        </form>
      </div>
    {% else %}
      <div class="mb-6">
        <p class="text-gray-700 mb-4">You're requesting to join <strong>{{ team.name }}</strong>. Your request will need to be approved by a team captain.</p>
        
        <form action="/teams/{{ team.id }}/join" method="post" class="space-y-4">
          <div>
            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message (Optional)</label>
            <textarea
              id="message"
              name="message"
              rows="4"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-irish-green"
              placeholder="Tell the team why you'd like to join..."
            ></textarea>
          </div>
          
          <button type="submit" class="w-full bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
            Send Join Request
          </button>
        </form>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}