{{ block styles }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ static 'css/styles.css' }}">
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'js/forms.js' }}"></script>
{{ endblock }}

{{ block content }}

<div class="outro-page">

    <div class="page-header">
        <p class="page-label">Almost done</p>
        <h1 class="page-title">About You</h1>
    </div>

    <div class="info-card">

        <div class="field-group">
            <div class="field-label">Please enter your age (whole number between 18 and 99)</div>
            <input class="field-input" type="number" name="age" min="18" max="99" placeholder="Your age" required>
        </div>

        <div class="field-group">
            <div class="field-label">What is your gender identity?</div>
            <div class="option-group">
                <label class="option-card"><input type="radio" name="gender" value="1" required> Male</label>
                <label class="option-card"><input type="radio" name="gender" value="2"> Female</label>
                <label class="option-card"><input type="radio" name="gender" value="3"> Non-binary</label>
                <label class="option-card"><input type="radio" name="gender" value="4"> Transgender</label>
                <label class="option-card"><input type="radio" name="gender" value="5"> Other</label>
                <label class="option-card"><input type="radio" name="gender" value="6"> Prefer not to say</label>
            </div>
        </div>

        <div class="field-group">
            <div class="field-label">Anything else you would like to tell us? (optional)</div>
            <textarea class="field-textarea" name="extra_comments" placeholder="Optional"></textarea>
        </div>

    </div>

    <div class="begin-row">
        <button type="submit" class="begin-btn" disabled>Continue &rarr;</button>
    </div>

</div>

{{ endblock }}