{% load i18n %} {% load pmsfilters %}
{% if messages %}
<div class="oh-wrapper">
    {% for message in messages %}
    <div class="oh-alert-container">
        <div class="oh-alert oh-alert--animated {{message.tags}}">
            {{ message }}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
<div class="oh-activity-sidebar__header">
    <a
    style="cursor: pointer;"
    onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');" >
    <ion-icon
    name="chevron-forward-outline"
    class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
    data-target="#leaveactivitySidebar"
    ></ion-icon>
    </a>
    <span class="oh-activity-sidebar__title"> {% trans "Activities" %} </span>
</div>
<form method="post"
    hx-target="#activityContainer"
    hx-post=" {% url 'objective-detailed-view-comment' objective.id %} " id="commentForm">
    {% csrf_token %}

    <div>
        <input type="text" name="comment" id="commentInput" class="oh-input w-100" placeholder="Comment here">
        <button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp" style="display: none;">
            {% trans "Comment" %}
        </button>
    </div>

    <div class="oh-inner-sidebar-content__footer"></div>
</form>
<ul class="oh-activity-list ">
    {% comment %} <li class="oh-activity-list__comment-item">
        <!-- comment section  -->
        {% for comment in comments %}
        <div class="oh-activity-list__comment-title">
            <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
                <img src="https://ui-avatars.com/api/?name={{comment.employee_id}}&background=random"
                    class="oh-activity-list__image" alt="Simone de Beauvoir" />
            </div>
            <small class="oh-activity-list__description">
                <span><strong>{{comment.employee_id}}</strong> {% trans "added a comment" %}</span>
                <div class="oh-activity-list__comment-timestamp mt-1">
                    <span class="dateformat_changer">{{ comment.created_at|date:"M. d, Y" }}</span>&nbsp,&nbsp
                    <span class="timeformat_changer">{{ comment.created_at|date:"g:i a" }}</span>
                </div>
            </small>
        </div>
        <div class="oh-activity-list__comment-container">
            <p class="oh-activity-list__comment">
                {{comment.comment}}
            </p>
        </div>
        {% endfor %}
        <!-- end of comment  -->
    </li> {% endcomment %}
    <!-- history section -->
    {% for activity in activity_list %}

        {% comment %} {% for history in history_object.delta.changes %} {% endcomment %}
            {% if activity.type == 'Changes' %}
            <ul class="d-flex justify-content-between align-items-center pt-3 mb-3 border-top">
                <li class="oh-activity-list__item align-items-center mb-0">
                    <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
                        <img src="https://ui-avatars.com/api/?name={{activity.updated_by}}&background=random"
                            class="oh-activity-list__image" alt="Albert Camus" />
                    </div>
                    <small class="oh-activity-list__description"><strong>{{activity.updated_by}} </strong>
                        {% trans "updated" %}
                        <strong> {{activity.changes.0.field |title|cut:'_'}}</strong> {% trans "from" %}
                        <strong>{{activity.changes.0.old}}</strong> to <strong>{{activity.changes.0.new}}</strong>
                    </small>
                </li>
                <li>
                    <small>
                        <span class="dateformat_changer">{{ activity.pair.0.history_date|date:"M. d, Y" }}</span>&nbsp,&nbsp
                        <span class="timeformat_changer">{{ activity.pair.0.history_date|date:"g:i a" }}</span>
                    </small>
                </li>
            </ul>
            {% elif activity.type == 'key_result' %}
            {% for history in activity.key_result.delta.changes %}
                <ul class="d-flex justify-content-between align-items-center pt-3 mb-3 border-top">
                    <li class="oh-activity-list__item align-items-center mb-0">
                        <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
                            <img src="https://ui-avatars.com/api/?name={{activity.key_result.changed_user}}&background=random"
                                class="oh-activity-list__image" alt="Albert Camus" />
                        </div>
                        <small class="oh-activity-list__description"><strong>{{activity.key_result.changed_user}} </strong>
                            {% trans "updated" %}
                            <strong>{{history.field|replace|title}}</strong> {% trans "field of " %}
                            <strong>{{activity.key_result.k_r}} </strong> {% trans "key result" %},
                            {% trans "from" %}
                            <strong>{{history.old}}</strong> {% trans "to" %} <strong>{{history.new}}</strong>
                            {% comment %} <strong> {{activity.changes.0.field |title|cut:'_'}}</strong> {% trans "from" %}
                            <strong>{{activity.changes.0.old}}</strong> to <strong>{{activity.changes.0.new}}</strong> {% endcomment %}
                        </small>
                    </li>
                    <li>
                        <small>
                            <span class="dateformat_changer">{{ activity.date|date:"M. d, Y" }}</span>&nbsp,&nbsp
                            <span class="timeformat_changer">{{ activity.date|date:"g:i a" }}</span>
                        </small>
                    </li>
                </ul>
            {% endfor %}
            {% elif activity.type == 'comment' %}
            <ul class="pt-3 border-top">
                <div class="oh-activity-list__comment-title d-flex justify-content-between align-items-center">
                    <div class="oh-activity-list__item align-items-center mb-0">
                        <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
                            <img src="https://ui-avatars.com/api/?name={{activity.comment.employee_id}}&background=random"
                                class="oh-activity-list__image" alt="Albert Camus" />
                        </div>
                        <small class="oh-activity-list__description">
                            <span><strong>{{activity.comment.employee_id}}</strong> {% trans "added a comment" %}</span>
                        </small>
                    </div>
                    <div>
                        <small>
                            <span class="dateformat_changer">{{ activity.comment.created_at|date:"M. d, Y" }}</span>&nbsp,&nbsp
                            <span class="timeformat_changer">{{ activity.comment.created_at|date:"g:i a" }}</span>
                        </small>
                    </div>
                </div>
                <div class="oh-activity-list__comment-container">
                    <p class="oh-activity-list__comment">
                        {{activity.comment.comment}}
                    </p>
                </div>
            </ul>
            {% else %}

            <ul class="d-flex justify-content-between align-items-center pt-3 mb-3 border-top">
                <li class="oh-activity-list__item align-items-center mb-0">
                    <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
                        <img src="https://ui-avatars.com/api/?name={{activity.updated_by}}&background=random"
                            class="oh-activity-list__image" alt="Albert Camus" />
                    </div>
                    <small class="oh-activity-list__description"><strong>{{activity.updated_by}} </strong>
                        {% trans "Created Objective" %}
                    </small>
                </li>
                <li>
                    <small>
                        <span class="dateformat_changer">{{ activity.pair.0.history_date|date:"M. d, Y" }}</span>&nbsp,&nbsp
                        <span class="timeformat_changer">{{ activity.pair.0.history_date|date:"g:i a" }}</span>
                    </small>
                </li>
            </ul>
            {% endif %}
        {% comment %} {% endfor %} {% endcomment %}
    {% endfor %}
</ul>

<script>
	// Get references to the input field and comment button
	const commentInput = document.getElementById('commentInput');
	const commentButton = document.getElementById('commentButton');

	// Add event listener to the input field
	commentInput.addEventListener('input', function() {
		// Show the comment button if the input field is not empty, hide it otherwise
		if (commentInput.value.trim() !== '') {
			commentButton.style.display = 'inline';
		} else {
			commentButton.style.display = 'none';
		}
	});
</script>