{% load i18n %}

<div class="tabbed-report-sidepanel-content">
    <div class="tabbed-report-sidepanel-title consultation-status-title" data-bind="css: {
        'completed': consultationStatus() === '7b3c5855-10f4-4b7f-807b-b68397535613'
    }">
        <div class="consultation-status">

            <!-- ko component: {
                name: 'concept-select-widget',
                params: { value: consultationStatus, state: 'display_value' }
            } --><!-- /ko -->

        </div>
        <div class="tabbed-report-sidepanel-subtitle">
            {% trans "Consultation Status" %}
        </div>
    </div>
    <div class="tabbed-report-sidepanel-main">
        <section class="sidebar-section">
            <h4>{% trans "Key Dates" %}</h4>
            <div class="sidebar-single-line-group">
                <div class="sidebar-single-line-type">{% trans "Logged Date" %}:
                    <span class="sidebar-single-line-value">
                    <!-- ko component: {
                        name: 'datepicker-widget',
                        params: { value: logDate, state: 'display_value' }
                    } --><!-- /ko -->
                    </span>
                </div>
            </div>
            <div class="sidebar-single-line-group">
                <div class="sidebar-single-line-type">{% trans "Due Date" %}:
                    <span class="sidebar-single-line-value">
                    <!-- ko component: {
                        name: 'datepicker-widget',
                        params: { value: dueDate, state: 'display_value' }
                    } --><!-- /ko -->
                    </span>
                </div>
            </div>
            <div class="sidebar-single-line-group">
                <div class="sidebar-single-line-type">{% trans "Completion Date" %}:
                    </span class="sidebar-single-line-value">
                    <!-- ko component: {
                        name: 'datepicker-widget',
                        params: { value: completionDate, state: 'display_value' }
                    } --><!-- /ko -->
                    </span>
                </div>
            </div>
        </section>
        <section class="sidebar-section">
            <h4>{% trans "Outcomes" %}</h4>
            <div class="sidebar-double-line-group">
                <div class="sidebar-double-line-type">{% trans "Planning Outcome" %}:</div>
                <div class="sidebar-double-line-value">
                <!-- ko component: {
                    name: 'concept-select-widget',
                    params: { value: planningOutcome, state: 'display_value' }
                } --><!-- /ko -->
                </div>
            </div>
            <div class="sidebar-double-line-group">
                <div class="sidebar-double-line-type">{% trans "Audit Outcome" %}:</div>
                <div class="sidebar-double-line-value">
                <!-- ko component: {
                    name: 'concept-select-widget',
                    params: { value: auditOutcome, state: 'display_value' }
                } --><!-- /ko -->
                </div>
            </div>
        </section>

        <!-- ko if: references().length > 0 -->
        <section class="sidebar-section">
            <h4>{% trans "References" %}</h4>
            <!-- ko foreach: references -->
            <div class="sidebar-double-line-group">
                <div class="sidebar-double-line-type">
                <!-- ko component: {
                    name: 'resource-instance-select-widget',
                    params: { value: agency, state: 'display_value' }
                } --><!-- /ko -->
                </div>
                <div class="sidebar-double-line-value">
                    <span data-bind="text: identifier"></span>
                </div>
            </div>
            <!-- /ko -->
        </section>
        <!-- /ko -->
    </div>
</div>
