{% extends 'base.html' %}

{% block header %}
    <h1>{% block title %} Get Profiles for a Given Topic {% endblock %}</h1>
{% endblock %}

{% block content %}

    <div class="card">
        <div class="card-body">
            <p>Find users who care about a topic of interest.</p>
            <p>Select an annotation domain and annotation entity below:</p>
            <form action="" method="post" novalidate>
                {{ domains_form.hidden_tag() }}
                <p>1. First select the domain:</p>
                <p>
                    {{domains_form.select.label}} {{domains_form.select}}
                </p>
                <input class="btn btn-sm btn-primary" type="submit" value="Submit domain">
                <br>
            </form>
            <br>
            <form action="" method="post" novalidate>
                {{ entities_form.hidden_tag() }}
                <p>2. Then select an entity within that domain:</p>
                <p>
                    {{entities_form.select.label}} {{entities_form.select}}
                </p>
                <input class="btn btn-sm btn-primary" type="submit" value="Submit entity">
                <br>
                <br>
                <sup><i>Note: the lists of domains and entities available above are not exhaustive and have been compiled for demonstrative purposes only.</i></sup>
            </form>
            <br>
        <sup style="color:brown">Once submitted, please allow ~30 seconds for data to be fetched and returned.</sup>
        </div>
    </div>

{% endblock %}

{% block results %}

    {% if users == [] %}

        <div class="card">
            <div class="card-body">
                <p>No data to analyze.</p>
                <br>
                <sup><i>For the purpose of this demo, this application only returns verified profiles based on a sample of non-promoted Tweets in English from the past 7 days.</i></sup>
                <br>
            </div>
        </div>
    
    {% elif users == 0 %}

    <div class="card">
        <div class="card-body">
            <p>Something went wrong. Try again later.</p>
            <br>
            <sup><i>For the purpose of this demo, this application only returns verified profiles based on a sample of non-promoted Tweets in English from the past 7 days.</i></sup>
            <br>
        </div>
    </div>
    
    {% elif users == 1 %}

    <div class="card">
        <div class="card-body">
            <p>No data to analyze. Try another topic.</p>
            <br>
            <sup><i>For the purpose of this demo, this application only returns verified profiles based on a sample of non-promoted Tweets in English from the past 7 days.</i></sup>
            <br>
        </div>
    </div>

    {% else %}

        <div class="card">
            <div class="card-body">
                
                {% for user in users %}
                <ul>
                    <li><b><a href="https://twitter.com/{{user[0][1]}}">{{ user[0][1] }},</a> {{ user[0][2] }}</b> <br><b>Profile description:</b> {{ user[0][3] }} <br><b>Profile_metrics:</b> {{ user[0][4] }} <br><b>Profile creation date:</b> {{ user[0][5] }} <br><b>Is verified:</b> {{ user[0][6] }} <br> <blockquote class="twitter-tweet"><a href="https://twitter.com/x/status/{{ user[1] }}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>   </li>
                </ul>
                {% endfor %}

                <br>
                <sup><i>For the purpose of this demo, this application only returns verified profiles based on a sample of non-promoted Tweets in English from the past 7 days.</i></sup>
                <br>
            </div>
        </div>
    
    {% endif %}

{% endblock %}