{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}

{% block canonical %} {% if article.slug %} {{ url('helpdesk_knowledgebase_read_slug_article', {'slug':article.slug }) }} {% endif %} {% endblock %}
{% block ogcanonical %} {% if article.slug %} {{ url('helpdesk_knowledgebase_read_slug_article', {'slug':article.slug }) }} {% endif %} {% endblock %}

{% block title %}{{ article.metaTitle ? article.metaTitle : article.name }}{% endblock %}
{% block ogtitle %}{{ article.metaTitle ? article.metaTitle : article.name }}{% endblock %}
{% block twtitle %}{{ article.metaTitle ? article.metaTitle : article.name }}{% endblock %}
{% block metaDescription %}{{ article.metaDescription ? article.metaDescription : uvdesk_service.createConentToKeywords(article.content, 255, true)|join(' ') }}{% endblock %}
{% block metaKeywords %}{{ article.keywords ?? uvdesk_service.createConentToKeywords(article.content) }}{% endblock %}

{% block body %}
	<div class="uv-paper-article">
		<div class="uv-paper-section">
			<section style="word-wrap: break-word;">
				<h1 {% if article.stared %}class="uv-starred"{% endif %}>{{ article.name }}</h1>
				<p>{{ article.content |raw }}</p>
				<div class="uv-author">
					{% if articleAuthor is defined and articleAuthor is not empty %}
						<div class="uv-author-avatar">
							{% if articleAuthor.user.profileImage is defined and articleAuthor.user.profileImage %}
								<img src="{{articleAuthor.user.profileImage}}">
							{% else %}
								<img src="{{ asset(default_customer_image_path) }}">
							{% endif %}
						</div>
						<div class="uv-author-info">
							<p>{{ articleAuthor.firstName | capitalize }} {{ articleAuthor.lastName | capitalize }}</p>
							<p><span>{{"Published on"|trans}} -</span> {{dateAdded}}</p>
						</div>
					{% endif %}
				</div>
			</section>


			{% if feedbacks is defined and feedbacks.enabled == true %}
				<section id="feedbacks" class="article-feedbacks">
					{% if feedbacks.submitted == true %}
						<p>Thank you for your feedback!</p>
					{% endif %}
				</section>
			{% endif %}
		</div>

		{% include "@UVDeskSupportCenter/Templates/sidepanel.html.twig" %}
	</div>
	{{ parent() }}
{% endblock %}

{% block footer %}
	{{ parent() }}

	{# Article Feedbacks #}
	{% if feedbacks is defined and feedbacks.enabled == true and feedbacks.submitted == false %}
		<script id="article_feedback_template" type="text/template">
			<p>Was this article helpful?</p>
			<ul>
				<li class="uv-btn-small article-badge-pta" data-feedback="positive">Yes</li>
				<li class="uv-btn-small article-badge-pta" data-feedback="negative">No</li>
			</ul>
		</script>

		<script type="text/javascript">
			$(function() {
				var ArticleFeedback = Backbone.View.extend({
					el: $("#feedbacks"),
					feedbacks: {positive: 0, negative: 0, collection: []},
					template: _.template($("#article_feedback_template").html()),
					events: {
						'click .article-badge-pta': 'ratingsPTA',
					},
					initialize: function() {
						{% if feedbacks is defined and feedbacks.article is not empty %}
							this.feedbacks = {{ feedbacks.article|json_encode|raw }};
						{% endif %}

						this.render();
					},
					render: function() {
						this.$el.html(this.template());
					},
					ratingsPTA: function(e) {
						var self = this;
						var feedbackType = $(e.currentTarget).data('feedback');

						$.ajax({
							url: "{{ url('helpdesk_knowledgebase_rate_article', {'articleId': article.id}) }}",
							method: 'POST',
							data: {
								feedback: feedbackType,
							},
							success: function(response) {
								this.$el.html('');
								app.appView.renderResponseAlert(response);
							},
							error: function(response) {
								response = $.parseJSON(response.responseText);

								// app.appView.hideLoader();
								app.appView.renderResponseAlert(response);
							}
						});
					},
				});

				var articleFeedback = new ArticleFeedback();
			});
		</script>
	{% endif %}
{% endblock %}