{% extends "base.html" %}
{% block title %}{{ member }} – Stadträt:in{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-start">
	<div>
		<h2 class="mb-1">{{ member.first_name }} {{ member.last_name }}</h2>
		<p class="text-muted mb-3">
			{% if member.public_body %}in <a href="{% url 'public_body_detail' slug=member.public_body.slug %}">{{ member.public_body.name }}</a>{% endif %}
			{% if member.party %} • {{ member.party }} (<a href="{% url 'party_detail' pk=member.party.id %}">Profil</a>){% endif %}
		</p>
	</div>
	<div>
		<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#askQuestionModal">Frage stellen</button>
	</div>
</div>

{% if messages %}
	<div class="mt-2">
		{% for message in messages %}
			<div class="alert alert-{{ message.tags|default:'info' }}">{{ message }}</div>
		{% endfor %}
	</div>
{% endif %}

<h3 class="mt-4">Fragen an {{ member.first_name }}</h3>
<ul class="list-group mb-4">
	{% for q in questions %}
		<li class="list-group-item">
			<strong>{{ q.title }}</strong>
			<div class="text-muted">{{ q.created_at|date:'d.m.Y H:i' }}</div>
		</li>
	{% empty %}
		<li class="list-group-item">Keine Fragen.</li>
	{% endfor %}
</ul>

<h3 class="mt-4">Abstimmungen (Beteiligung)</h3>
<ul class="list-group">
	{% for v in votes %}
		<li class="list-group-item d-flex justify-content-between align-items-center">
			<span>
				<strong>{{ v.title }}</strong>
				{% if v.date %}<span class="text-muted ms-2">({{ v.date|date:'d.m.Y' }})</span>{% endif %}
			</span>
			<span class="text-muted">{{ v.public_body.name }}</span>
		</li>
	{% empty %}
		<li class="list-group-item">Keine Abstimmungen.</li>
	{% endfor %}
</ul>

<!-- Ask Question Modal -->
<div class="modal fade" id="askQuestionModal" tabindex="-1" aria-labelledby="askQuestionModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="askQuestionModalLabel">Frage an {{ member.first_name }} {{ member.last_name }}</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
			</div>
			<form method="post" action="{% url 'ask_question' pk=member.id %}">
				{% csrf_token %}
				<div class="modal-body">
					<div class="mb-3">
						<label for="title" class="form-label">Frage</label>
						<input type="text" class="form-control" id="title" name="title" required>
					</div>
					<div class="row g-2">
						<div class="col-6">
							<label for="asker_first_name" class="form-label">Vorname</label>
							<input type="text" class="form-control" id="asker_first_name" name="asker_first_name" required>
						</div>
						<div class="col-6">
							<label for="asker_last_name" class="form-label">Name</label>
							<input type="text" class="form-control" id="asker_last_name" name="asker_last_name" required>
						</div>
					</div>
					<div class="mb-3 mt-2">
						<label for="asker_city" class="form-label">Wohnort</label>
						<input type="text" class="form-control" id="asker_city" name="asker_city" required>
					</div>
					<div class="mb-3">
						<label for="asker_email" class="form-label">E-Mail</label>
						<input type="email" class="form-control" id="asker_email" name="asker_email" required>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
					<button type="submit" class="btn btn-primary">Senden</button>
				</div>
			</form>
		</div>
	</div>
</div>
{% endblock %}