{% extends "symposion/proposals/base.html" %}

{% load i18n %}

{% block head_title %}{{ proposal.title }}{% endblock %}
{% block page_title %}#{{ proposal.number }}: {{ proposal.title }} ({{ proposal.speaker }}){% endblock %}

{% block proposals_body %}
  <div class="mb-4">
    <ul class="nav nav-tabs mb-2">
      <li class="nav-item"><a class="nav-link active" href="#proposal-detail" data-toggle="tab">{% trans "Proposal Details" %}</a></li>
      <li class="nav-item"><a class="nav-link" href="#supporting-document" data-toggle="tab">{% trans "Supporting Documents" %}</a></li>
      <li class="nav-item"><a class="nav-link" href="#reviewer-feedback" data-toggle="tab">{% trans "Reviewer Feedback" %} ({{ proposal.messages.all|length }})</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="proposal-detail">
        {% include "symposion/proposals/_proposal_fields.html" %}
          {% if not proposal.cancelled %}
            {% if request.user == proposal.speaker.user %}
              <a class="btn btn-lg btn-primary" href="{% url "proposal_edit" proposal.pk %}">{% trans "Edit this proposal" %}</a>
              <a class="btn btn-lg btn-success" role="button" href="{% url "proposal_speaker_manage" proposal.id %}">Manage Additional Speakers</a>
              <a class="btn btn-lg btn-danger" href="{% url "proposal_cancel" proposal.pk %}">{% trans "Cancel this proposal" %}</a>
            {% else %}
              <a href="{% url "proposal_leave" proposal.pk %}" class="btn btn-secondary">{% trans "Remove me from this proposal" %}</a>
            {% endif %}
          {% else %}
            {% trans 'Cancelled' %}
          {% endif %}
      </div>

      <div class="tab-pane" id="supporting-document">
        <div class="row">
          <div class="col-12">
            <h2 class="my-4">Documents</h2>
            {% if proposal.supporting_documents.exists %}
          <table class="table table-striped">
            {% for document in proposal.supporting_documents.all %}
              <tr>
                <td><a href="{{ document.download_url }}">{{ document.description }}</a></td>
                <td>
                  <form class="form-horizontal" style="margin: 0;" method="post" action="{% url "proposal_document_delete" document.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-xs">{% trans 'delete' %}</button>
                  </form>
                </td>
              </tr>
            {% endfor %}
          </table>
          {% else %}
          <p>{% trans 'No supporting documents attached to this proposal.' %}</p>
           {% endif %}
           <a class="btn btn-primary {% if proposal.cancelled %} btn-disabled{% endif %}" href="{% url "proposal_document_create" proposal.pk %}"><i class="fa fa-upload"></i> {% trans 'Add Document' %}</a>
          </div>
        </div>
      </div>

      <div class="tab-pane" id="reviewer-feedback">
        <div class="row">
          <div class="col-12">
            <h2 class="my-4">{% trans 'Conversation with Reviewers' %}</h2>
          </div>
        </div>

        {% for message in proposal.messages.all %}
          <div class="card">
            <div class="card-body">
              <div class="comment monospace-text"><em>{{ message.message|safe }}</em></div>
            </div>
            <div class="card-footer">
              <div><b>{{ message.user.username }}</b> {{ message.submitted_at|timesince }} ago</div>
            </div>
          </div>
          <br />
        {% endfor %}
        <h3 class="my-4">{% trans 'Leave a Message' %}</h3>
        <p>{% trans 'You can leave a message for the reviewers here.' %}</p>
        <form class="form-horizontal" action="" method="POST" accept-charset="utf-8">
          {% csrf_token %}
          <fieldset>
            {% include "_form_snippet.html" with form=message_form %}
            <div class="btn-group">
              <button type="submit" name="message_submit" class="btn btn-primary">{% trans 'Submit' %}</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
{% endblock %}