{% load i18n %}

<div class="approval-widget">
    <h5 class="hd-5 emphasized approvals-heading">{% trans "REVIEWS" %}</h5>
    {% if is_course_run and not course_run.course.course_state.is_approved %}
        <div class="parent-course-approval">
            {% url 'publisher:publisher_course_detail' course_run.course.id as course_url %}
            {% with link_start='<a href="' link_middle='">' link_end='</a>' %}
            {% blocktrans with course_name=course_run.course.title trimmed %}
                You can currently edit information for this course run. However, before you can submit this course run for review, you must finalize the information for {{ link_start }}{{ course_url }}{{ link_middle }}{{ course_name }}{{ link_end }} with edX.
            {% endblocktrans %}
            {% endwith %}
        </div>
    {% endif %}

    {% for role_widget in  role_widgets %}
        {% if role_widget.course_role.role == 'publisher' %}
            <div class="preview-widget">
            <div class="preview-container">
                <div class="layout-1q3q layout-reversed">
                    <div class="layout-col layout-col-a">
                    {% if course_run.preview_url %}
                        {% if is_in_preview_review and course_run.course.course_team_admin == request.user %}
                            <button class="btn btn-neutral btn-preview btn-preview-decline" type="button">
                                {% trans "Decline" %}
                            </button>
                            <button class="btn btn-neutral btn-preview btn-preview-accept" type="button">
                                {% trans "Accept" %}
                            </button>
                        {% elif preview_accepted_date %}
                            <span class="state-status">
                                <span class="icon fa fa-check" aria-hidden="true"></span>
                                {% trans "Accepted" %}<br>
                                {{ preview_accepted_date|date:'m/d/y H:i a' }}
                            </span>
                            {% if course_run.course_run_state.is_ready_to_publish and course_run.course.publisher == request.user %}
                                <button class="btn-brand btn-base btn-publish" data-change-state-url="{% url 'publisher:api:change_course_run_state' course_run.course_run_state.id %}" data-state-name="{{ publish_state_name }}" type="button">
                                    {% trans "Publish" %}
                                </button>
                            {% endif %}
                        {% elif course_run.course.publisher == request.user %}
                            {% if course_run.course_run_state.owner_role == 'course_team' %}
                                <span class="preview-status">{% trans "Submitted for review" %}</span>
                            {% else %}
                                <span class="preview-status">{% trans "Preview Declined" %}</span>
                            {% endif %}
                                <button data-url="{% url 'publisher:api:update_course_run' course_run.id %}" class="btn btn-neutral btn-edit-preview-url">{% trans "Edit" %}</button>
                        {% endif %}
                    {% elif course_run.course.publisher == request.user %}
                        <button data-url="{% url 'publisher:api:update_course_run' course_run.id %}" class="btn btn-neutral btn-save-preview-url">{% trans "Save" %}</button>
                    {% endif %}
                    </div>
                    <div class="layout-col layout-col-b">
                        <span class="preview-heading">
                            <strong>{% trans "ABOUT PAGE PREVIEW" %}</strong>
                        </span>
                        <div class="preview-url">
                            {% if course_run.preview_url %}
                                <span class="preview-url-heading">{% trans "Preview URL" %} - </span>
                                <a href="{{ course_run.preview_url }}" target="_blank">{% trans "View About page preview" %}</a>
                            {% else %}
                                {% if course_run.course.publisher == request.user %}
                                    <input id="id-review-url" type="text">
                                    <span class="error-message"></span>
                                {% else %}
                                    <span>{% trans "Not available" %}</span>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        {%  endif %}
        <div class="role-widget">
            <div class="role-assignment-container">
                <div class="layout-1q3q layout-reversed">
                    <div class="layout-col layout-col-a">
                        {% if role_widget.state_button %}
                            <button class="btn btn-neutral btn-change-state" data-change-state-url="{{ role_widget.change_state_url }}" data-state-name="{{ role_widget.state_button.value }}"{% if role_widget.button_disabled %} disabled{% endif %} type="button">
                                {{ role_widget.state_button.text }}
                            </button>
                        {% else %}
                            {% if role_widget.sent_for_review %}
                                <span class="state-status">
                                    <span class="icon fa fa-check" aria-hidden="true"></span>
                                    {% trans "Sent for Review" %}<br>
                                    {{ role_widget.sent_for_review|date:'m/d/y H:i a' }}
                                </span>
                            {% elif role_widget.reviewed %}
                                <span class="state-status">
                                    <span class="icon fa fa-check" aria-hidden="true"></span>
                                    {% trans "Reviewed" %}<br>
                                    {{ role_widget.reviewed|date:'m/d/y H:i a' }}
                                </span>
                            {% endif %}
                        {% endif %}
                    </div>
                    <div class="layout-col layout-col-b">
                        <span class="role-heading">
                            <strong>{{ role_widget.heading }}</strong>
                        </span>
                        {% if role_widget.ownership %}
                            <span class="ownership-label">{{ role_widget.ownership.days }}
                                {% if role_widget.ownership.days == 1 %}
                                    {% trans "day in ownership" %}
                                {% else %}
                                    {% trans "days in ownership" %}
                                {% endif %}
                            </span>
                        {% endif %}
                        <div class="role-assignment-container">
                            <div id="userRoleContainer-{{ role_widget.course_role.role }}">
                                <span id="userFullName-{{ role_widget.course_role.role }}" class="field-readonly user-full-name">
                                    {% if role_widget.course_role.user.full_name %}
                                        {{ role_widget.course_role.user.full_name }}
                                    {% else %}
                                        {{ role_widget.course_role.user.username }}
                                    {% endif %}
                                </span>
                                {% if role_widget.can_change_role_assignment %}
                                    <a class="change-role-assignment" data-role="{{ role_widget.course_role.role }}" href="#">
                                        {% trans "change" %}
                                    </a>
                                {% endif %}
                            </div>
                            {% if role_widget.can_change_role_assignment %}
                                <div class="change-role-container" id="changeRoleContainer-{{ role_widget.course_role.role }}">
                                    <select class="select-users-by-role" id="selectUsers-{{ role_widget.course_role.role }}">
                                        <option value="-----------">-----------</option>
                                        {% for user in role_widget.user_list %}
                                            <option value="{{ user.id }}">
                                                {% if user.full_name %}
                                                    {{ user.full_name }}
                                                {% else %}
                                                    {{ user.username }}
                                                {% endif %}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" id="roleName" value="{{ role_widget.course_role.role }}">
                                    <button type="button" class="btn-neutral btn-change-assignment" data-role="{{ role_widget.course_role.role }}" data-api-endpoint="{% url 'publisher:api:course_role_assignments' role_widget.course_role.id %}">
                                        {% trans "CHANGE" %}
                                    </button>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    {% endfor %}
</div>
