{% extends "WebApp/app_base.html" %}
{% load static %}
{% block title %}SERVIR AppTemplate - About{% endblock %}
{% block script %}
    <!-- Custom styles-->

    <!-- Custom scripts-->
    <link href="{% static '/css/about.css' %}" rel="stylesheet" type="text/css">

{% endblock %}

{% block content %}
    <br>
    <!-- Root container for the about page's content -->
    <div class="container-fluid  bg-gray-300">
        <!-- About -->
        <!-- Update the text inside <p> tags in order to update the about text -->
        <div class="row">
            <div class="col-lg-12 mb-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">About this application</h6>
                    </div>
                    <div class="card-body">
                        <div class="text-left text-dark">
                            <p>This page is used to explain the concepts behind the application. You can provide
                                visitors information about data, methods, tools, how to use the results, etc. For
                                example:</p>
                            <p>Discover the power of location with our cutting-edge geospatial web
                                application. Our user-friendly interface allows you to easily navigate and explore maps,
                                as well as create custom charts and graphics. Whether you're an organization looking to
                                analyze environmental trends, or a government agency monitoring natural resources,
                                this application provides tools you need to make informed decisions. With real-time data
                                and advanced mapping technologies, you can visualize your data in new and exciting
                                ways.</p>
                            <footer class="blockquote-footer">Generated by <cite title="Source Title">ChatGPT</cite>
                            </footer>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Team member listing -->
        <!-- Change the path in src of <img> tag in order to replace a team member's picture -->
        <div class="row">
            <div class="col-lg-12 mb-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Team members</h6>
                    </div>
                    <div class="card-body text-center">
                        <div class="row row-centered pos">
                            <div class="col-sm-3">
                                <div><img src="{% static 'images/teammembers/TeamMember1.jpg' %}" alt="img1"
                                          class="img-thumbnail team-member">
                                    <p>Team member 1</p></div>
                            </div>
                            <div class="col-sm-3">
                                <div><img src="{% static 'images/teammembers/TeamMember2.jpg' %}" alt="img1"
                                          class="img-thumbnail team-member">
                                    <p>Team member 2</p></div>
                            </div>
                            <div class="col-sm-3">
                                <div><img src="{% static 'images/teammembers/TeamMember3.jpg' %}" alt="img1"
                                          class="img-thumbnail team-member">
                                    <p>Team member 3</p></div>
                            </div>
                            <div class="col-sm-3">
                                <div><img src="{% static 'images/teammembers/TeamMember4.jpg' %}" alt="img1"
                                          class="img-thumbnail team-member">
                                    <p>Team member 4</p></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Disclaimer -->
        <!-- Update the text inside <strong> in order to update the disclaimer text -->
        <div class="row">
            <div class="col-lg-12 mb-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Disclaimer</h6>
                    </div>
                    <div class="card-body">
                        <div class="text-left text-dark">
                            SERVIR's standard disclaimer is
                            <hr>
                            <strong>SERVIR Program, NASA, USAID and SERVIR partner organizations
                                make no express or implied warranty of this application as to the
                                merchantability or fitness for any particular purpose.
                                Neither the US Government nor its contractors shall be liable for
                                special, consequential or incidental damages attributed to this application.</strong>
                            <hr>
                            Modify it to add other organizations that contributed to the
                            development of this application as necessary.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Logos -->
        <!-- Update the path inside src of <img> tag in order to update the logo images -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Logos</h6>
                    </div>
                    <div class="card-body text-center">
                        <a href="" class="p-3"><img class="org-logo" src="{% static 'images/logos/AMZ_Alliance.jpg' %}"></a>
                        <a href="" class="p-3"><img class="org-logo" src="{% static 'images/logos/ICRISAT.jpg' %}"></a>
                        <a href="" class="p-3"><img class="org-logo" src="{% static 'images/logos/RCMRD.jpg' %}"></a>
                        <a href="" class="p-3"><img class="org-logo" src="{% static 'images/logos/ICIMOD.jpg' %}"></a>
                        <a href="" class="p-3"><img class="org-logo" src="{% static 'images/logos/ADPC.jpg' %}"></a>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <button type="button" class="btn btn-info" data-bs-toggle="modal"
                        data-bs-target="#aboutModal">
                    Learn how to modify this page
                </button>
            </div>
        </div>
        <br>
    </div>
    {% include 'WebApp/about_about.html' %}

{% endblock %}