{% extends "base.html" %}

{% block title %}Zixi Chen{% endblock %}

{% block content %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/contact.css') }}">

    <div id="popupModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <p id="modalMessage"></p>
        </div>
    </div>

    <div class="contact-container">
        <div class="contact-panel">
            <form id="contactForm" class="contact-form" method="POST">
                <div class="contact-title">{{ text["contact_title"] }}</div>

                <div class="input-group">
                    <input type="text" id="name" name="name" placeholder="{{ text['contact_name'] }}" value="{{ name }}" required>
                </div>

                <div class="input-group">
                    <input type="email" id="email" name="email" placeholder="{{ text['contact_reply_method'] }}" value="{{ email }}" required>
                </div>

                <div class="input-group">
                    <input type="text" id="subject" name="subject" placeholder="{{ text['contact_subject'] }}" value="{{ subject }}">
                </div>

                <div class="input-group">
                    <textarea id="message" name="message" placeholder="{{ text['contact_message'] }}" rows="4" required>{{ message }}</textarea>
                </div>

                <button type="submit" class="send-button">{{ text['contact_send'] }}</button>
            </form>
        </div>
    </div>

{% endblock %}