{% extends 'base.html' %}
{% load static %}
{% load placeholder_filters %}

{% block bodydata %}
    data-project-id="{{ project.id }}"
    data-project-locked="{{ project.islocked }}"
    data-contributions-count="{{ project.observations.count }}"

{% endblock %}

{% block title %} | Project: {{ project.name }} - Create new social interaction{% endblock %}

{% block main %}
    <div class="page-header">
        <div class="container">
            <h1 class="smaller">
                {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                <a href="{% url 'admin:project_overview' project.id %}">{{ project.name }}</a>
            </h1>

            {% include 'projects/navigation.html' %}
        </div>
    </div>

    <div class="container">
        {% include 'snippets/messages.html' %}

        <div class="row">
            <form class="col-md-8 col-md-offset-2" method="POST"
                  action="{% url 'admin:socialinteraction_post_create' project.id %}" novalidate>
                {% csrf_token %}

                <h3 class="header">
                    {% if project.islocked %}
                        <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                    <span>Create new post task to social media</span>
                </h3>

                <div class="form-group">
                    <label for="socialaccount" class="control-label">Social account</label>

                    <select class="form-control" id="socialaccount" name="socialaccount" required>
                        {% for socialaccount in auth_users %}
                            <option value="{{ socialaccount.id }}"
                                    class="form-control input-lg">{{ socialaccount.get_provider_account }}
                                ¦¦ {{ socialaccount.provider }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label for="text_post" class="control-label">Text to post <span id="characters">(<span
                            id="remaining_characters"></span> characters left)</span> </label>
                    <textarea class="form-control input-lg" rows="5" id="text_post" name="text_post"
                    >New contribution added to {{ project.name|hashify }}. Check it out here $link$</textarea>
                </div>
                <div class="form-group">
                    <label for="text_link" class="conrol-label">Link address</label>
                    <input class="form-control input-lg" type="text" id="text_link"
                           name="text_link"
                           value="https://communitymaps.org.uk/project/$project_id$/contribution/$contribution_id$">
                </div>
                <div class="alert alert-info">
                    <p>You can use the following placeholder tags in your text and link
                    <ul>
                        <li>$link$: this will create a link, which can be included in the tweet.</li>
                        <li>$project_id$: this will display the project id.</li>
                        <li>$contribution_id$: this will display the contribution id.</li>
                    </ul>
                    </p>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <a role="button" href="{% url 'admin:socialinteraction_list' project.id %}" class="btn btn-link">Cancel</a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block libraries %}
    <script src="/static/js/admin.ui.forms.validate.js"></script>
    <script src="/static/js/admin.ui.socialinteractions.twittervalidator.js"></script>
{% endblock %}
