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

{% block title %} 
	{{ 'Api Access Credential Settings'|trans }}
{% endblock %}

{% block pageContent %}
	<style>
		.section-heading {
			font-size: 16px;
			margin: 0px;
			line-height: 1.4em;
		}

		.section-description {
			color: #6F6F6F;
			margin-top: unset !important;
			margin-bottom: 20px;
			line-height: 1.4em;
		}

		.uv-element-block .uv-field-message {
			font-style: normal;
			margin: 0px 0px 20px 0px;
		}
	</style>

	<div class="uv-inner-section">
		{# Append Panel Aside #}
		{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
		{% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Settings' %}

		{{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}

		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
			<h1>Create Access Credentials</h1>

            <div class="uv-hr"></div>
			
			<form id="access-credential-settings-view" method="POST" action="">
				{# Token Name #}
				<div class="uv-element-block">
					<label class="uv-field-label">Token Name:</label>

					<div class="uv-field-block">
						<input type="text" name="name" class="uv-field" placeholder="Enter Token Name" />
					</div>
				</div>

				<div class="uv-element-block">
					<label>
						<div class="uv-checkbox">
							<input name="isEnabled" type="checkbox" checked="">
							<span class="uv-checkbox-view"></span>
						</div>

						<span class="uv-checkbox-label">Enable Credentials</span>
					</label>
				</div>

				<input type="submit" class="uv-btn" href="#" value="{{ 'Save Credentials'|trans }}">
			</form>
		</div>
	</div>
{% endblock %}

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

	<script type="text/javascript">
		$(function () {
			var ApiCredentialSettingsModel = Backbone.Model.extend({
                idAttribute: "id",
                validation: {
					name: function(value) {
						if (value == undefined || value == '') {
							return "Please specify a valid name for your access credentials.";
						}
                    }
				}
			});

			var ApiCredentialSettingsView = Backbone.View.extend({
				events: {
					'click .uv-btn' : "validateSubmission",
				},
				initialize: function() {
                    Backbone.Validation.bind(this);
				},
                validateSubmission: function(e) {
                    e.preventDefault();
                    this.model.set(this.$el.serializeObject());

			        if (this.model.isValid(true)) {
			            this.$el.submit();
			        }
                }
			});
			
			new ApiCredentialSettingsView({
				el: $("#access-credential-settings-view"),
				model: new ApiCredentialSettingsModel()
			});
		});
	</script>
{% endblock %}