{% extends "problem/list-base.html" %}
{% block left_sidebar %}
    {% include "problem/left-sidebar.html" %}
{% endblock %}

{% block middle_content %}
    <div class="problem-feed-option">
        <a href="{{url('problem_feed')}}" class="problem-feed-option-item {{'active' if feed_type=='for_you'}}">
            {{_('FOR YOU')}}
        </a>
        <a href="{{url('problem_feed_new')}}" class="problem-feed-option-item {{'active' if feed_type=='new'}}">
            {{_('NEW')}}
        </a>
        {% if request.user.has_perm('judge.suggest_problem_changes') %}
            <a href="{{url('problem_feed_volunteer')}}" class="problem-feed-option-item {{'active' if feed_type=='volunteer'}}">
                {{_('VOLUNTEER')}}
            </a>
        {% endif %}
    </div>
    {% for problem in problems %}
        <div class="blog-box">
            <h3 class="problem-feed-name">
                <a href="{{ url('problem_detail', problem.code) }}">
                    {{ problem.name }}
                </a>
                {% if problem.id in completed_problem_ids %}
                    <i class="solved-problem-color fa fa-check-circle"></i>
                {% elif problem.id in attempted_problems %}
                    <i class="attempted-problem-color fa fa-minus-circle"></i>
                {% else %}
                    <i class="unsolved-problem-color fa fa-minus-circle"></i>
                {% endif %}
            </h3>
            {% with authors=problem.authors.all() %}
                {% if authors %}
                    <div class="problem-feed-info-entry">
                        <i class="fa fa-pencil-square-o fa-fw"></i>
                        <span class="pi-value">{{ link_users(authors) }}</span>
                    </div>
                {% endif %}
            {% endwith %}
            {% if show_types %}
                <div class="problem-feed-types">
                    <i class="fa fa-tag"></i>
                    {% for type in problem.types_list %}
                        <span class="type-tag">{{ type }}</span>{% if not loop.last %}, {% endif %}
                    {% endfor %}, *{{problem.points | int}}
                </div>
            {% endif %}
            <div class='blog-description content-description'>
                {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
                    {{ problem.description|markdown("problem", MATH_ENGINE)|reference|str|safe }}
                {% endcache %}
                {% if feed_type=='volunteer' and request.user.has_perm('judge.suggest_problem_changes') %}
                    <hr>
                    <center><h3>{{_('Volunteer form')}}</h3></center>
                    <br>
                    <button class="edit-btn" id="edit-{{problem.id}}" pid="{{problem.id}}" style="float: right">{{_('Edit')}}</button>
                    <form class="volunteer-form" id="form-{{problem.id}}" pid="{{problem.id}}" style="display: none;" method="POST">
                        <input type="submit" class="volunteer-submit-btn" id="submit-{{problem.id}}" pid="{{problem.id}}" pcode="{{problem.code}}" style="float: right" value="{{_('Submit')}}">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        {{_('Value')}}
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td width="30%">
                                        <label for="knowledge_point-{{problem.id}}"><i>{{ _('Knowledge point') }}</i></label>
                                    </td>
                                    <td>
                                        <input id="knowledge_point-{{problem.id}}" type="number" class="point-input" required>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="30%">
                                        <label for="thinking_point-{{problem.id}}"><i>{{ _('Thinking point') }}</i></label>
                                    </td>
                                    <td>
                                        <input id="thinking_point-{{problem.id}}" type="number" class="point-input" required>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="30%">
                                        <label for="types"><i>{{ _('Problem types') }}</i></label>
                                    </td>
                                    <td>
                                        <select id="volunteer-types-{{problem.id}}" name="types" multiple>
                                            {% for type in problem_types %}
                                                <option value="{{ type.id }}"{% if type in problem.types.all() %} selected{% endif %}>
                                                    {{ type.full_name }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="30%">
                                        <label for="feedback"><i>{{ _('Feedback') }}</i></label>
                                    </td>
                                    <td>
                                        <textarea id="feedback-{{problem.id}}" rows="2" style="width: 100%" placeholder="{{_('Any additional note here')}}"></textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                    <center id="thank-{{problem.id}}" style="display: none; margin-top: 3em"></center>
                {% endif %}
            </div>
        </div>
    {% endfor %}
    {% if page_obj.num_pages > 1 %}
        <div style="margin-top:10px;">{% include "list-pages.html" %}</div>
    {% endif %}
{% endblock %}