{% extends 'base.html' %}
{% block title %}Membership | APSS Nepal{% endblock %}
{% block content %}
<section class="page-ribbon"><div class="container">⌂ <a href="{{ url_for('home') }}">HOME</a> &nbsp; &gt; &nbsp; MEMBERSHIP</div></section>
<section class="page-intro">
  <div class="container">
    <h1>Membership</h1>
    <p>For political science students, researchers, academics, policy professionals, civic actors and citizens interested in democratic learning.</p>
  </div>
</section>
<section class="section compact">
  <div class="container form-layout">
    <div>
      <span class="eyebrow">Join APSS</span>
      <h2>Why become a member?</h2>
      <ul class="check-list">
        <li>Participate in APSS dialogues, conferences and roundtables.</li>
        <li>Connect with political science scholars, civic actors and institutions.</li>
        <li>Contribute to research, publications and democratic learning.</li>
        <li>Engage with district chapters and youth groups across Nepal.</li>
      </ul>
      <div class="support-panel" id="chapters">
        <h3>District Chapters & Youth Groups</h3>
        <p>The live website can show current APSS chapters, local youth groups and membership pathways after verification of the latest data.</p>
      </div>
    </div>
    <form class="form-card" method="post" id="application">
      <h2>Membership Application</h2>
      <label>Full Name *<input type="text" name="full_name" required></label>
      <label>Email *<input type="email" name="email" required></label>
      <label>Phone<input type="text" name="phone"></label>
      <label>District<input type="text" name="district"></label>
      <label>Profession / Institution<input type="text" name="profession"></label>
      <label id="categories">Membership Type
        <select name="membership_type">
          <option>General Member</option>
          <option>Student Member</option>
          <option>Research Member</option>
          <option>Life Member</option>
          <option>Volunteer / Youth Group</option>
        </select>
      </label>
      <label>Message<textarea name="message" rows="4"></textarea></label>
      <button type="submit">Submit Application</button>
    </form>
  </div>
</section>
{% endblock %}