{% extends "base.html" %}
{% block header %}
  {{ super() }}
{% endblock header %}

{% block content %}
  {% include "partials/navbar.html" %}

  <div class="container mt-4">
    <h2 class="text-center mb-4">Add Activity Mapping</h2>
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <ul class=flashes>
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
    {% endwith %}

    <form method="POST" action="{{ url_for('activities_form') }}">

      <div class="form-section">
        <h5 class="form-title">Reporter Information</h5>
        <hr class="section-divider" />
        <div class="form-group">
          <label for="name" class="form-label">Name</label>
          <input type="text" class="form-control" id="name" name="name" placeholder="e.g. langat_nath">
        </div>
      </div>

      <div class="form-section">
        <h5 class="form-title">Location Mapping</h5>
        <hr class="section-divider" />
        <div class="form-row">
          <div class="form-col">
            <label class="form-label">Activity Level</label>
            <input type="text" class="form-control" name="activity_level">
          </div>
          <div class="form-col">
            <label class="form-label">State</label>
            <input type="text" class="form-control" name="state">
          </div>
          <div class="form-col">
            <label class="form-label">District</label>
            <input type="text" class="form-control" name="district">
          </div>
          <div class="form-col">
            <label class="form-label">Block</label>
            <input type="text" class="form-control" name="block">
          </div>
          <div class="form-col">
            <label class="form-label">Sector</label>
            <input type="text" class="form-control" name="sector">
          </div>
          <div class="form-col">
            <label class="form-label">Centre</label>
            <input type="text" class="form-control" name="centre">
          </div>
          <div class="form-col">
            <label class="form-label">Panchayat Name</label>
            <input type="text" class="form-control" name="panchayat_name">
          </div>
          <div class="form-col">
            <label class="form-label">School Name</label>
            <input type="text" class="form-control" name="school_name">
          </div>
        </div>
      </div>

      <div class="form-section">
        <h5 class="form-title">Activity Classification</h5>
        <hr class="section-divider" />
        <div class="form-row">
          <div class="form-col">
            <label class="form-label">Activity Type</label>
            <input type="text" class="form-control" name="activity_type">
          </div>
          <div class="form-col">
            <label class="form-label">Stakeholders Type</label>
            <input type="text" class="form-control" name="stakeholders_type">
          </div>
          <div class="form-col">
            <label class="form-label">Other Stakeholders Type</label>
            <input type="text" class="form-control" name="other_stakeholders_type">
          </div>
          <div class="form-col">
            <label class="form-label">Follow Up Through</label>
            <input type="text" class="form-control" name="follow_up_through">
          </div>
          <div class="form-col">
            <label class="form-label">Channel Type</label>
            <input type="text" class="form-control" name="channel_type">
          </div>
          <div class="form-col">
            <label class="form-label">Engagement Type</label>
            <input type="text" class="form-control" name="engagement_type">
          </div>
          <div class="form-col">
            <label class="form-label">Other Engagement Type</label>
            <input type="text" class="form-control" name="other_engagement_type">
          </div>
        </div>
      </div>

      <div class="submit-btn">
        <button type="submit" class="btn btn-success px-4">Submit</button>
      </div>
    </form>
  </div>

{% endblock content %}