{% extends 'gui2/appstore2/base.html' %}
{% load dashboard_tags %}
{% load crispy_forms_tags %}
{% load humanize %}
{% load fontawesome %}
{% load control %}
{% load static %}
{% load i18n %}
<!-- ============================= Address Bar Start =============================== -->
{% block breadcrumbs %}
<div id="address_content" style="display: none">
    <ol class="breadcrumb mb-0" aria-label="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'dashboard:home' %}">Enrich</a></li>
        <li class="breadcrumb-item"><a href="{% url 'dashboard:index' %}">Usecases</a></li>
        <li class="breadcrumb-item"><a href="{% url 'dashboard:usecase_detail' usecase.org.name %}">{{usecase.org.name}}</a></li>
	<li class="breadcrumb-item"><a href="{% url basenamespace|add:':index' %}">{{spec.name}}</a></li>
	<li class="breadcrumb-item"><a href="{% url basenamespace|add:':policy_index' %}">Configurations</a></li>
        <li class="breadcrumb-item active">Add</li>
    </ol>
</div>
{% with tags=spec.tags|join:" " %}
{% with knowledge=spec.name|add:' '|add:app.name|add:' '|add:tags %}{{ block.super }}{% endwith %}
{% endwith %}

{% endblock breadcrumbs %}
<!-- ============================= Address Bar End =============================== -->
{% block nav_index%}
<!--Header tab name-->
    {% with nav_data="usecases" %}{{ block.super }}{% endwith %}
{% endblock %}
<!--============================= Help Content =============================== -->
{% block help %}
{% include 'sharedapp/partials/help.html' with app=app spec=spec extra="This page allows you to store the configuration" %}
{{block.super}}
{% endblock %}
<!--============================= Help Content End =============================== -->
{% block content %}
    <!-- !! -============================= HERO START HERE ==========================- -->
   <div class="hero-container">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-12">
               <div class="hero-content-box w-100 position-relative  d-flex flex-wrap align-items-center">
                  <div class="hcb-left d-flex align-items-center">
                     <div class="hcb-icon-box">
                         {% if 'icon' in spec %}
                            <img src="{% static 'gui2/appstore2/images/'|add:spec.icon|add:'.svg' %}" alt="" />
                        {% else %}
                            <img src="{% static 'gui2/appstore2/images/placholder.jpg' %}" alt="" />
                        {% endif %}
                     </div>
                     <div class="hcb-text-box">
                        <h3>{% translate 'Complete the New Configuration' %}</h3>
			<p>App: {% translate spec.name %} | Type: {{app.verbose_name}}</p>
                        {% include 'dashboard/_appusers.html' with usecase=usecase spec=spec %}
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- !! -=============================  HERO START END HERE ==========================- -->
    <div class="block-container">
         <div class="container-fluid">
            <div class="row">
               <div class="col-md-12">
                  <div class="block-content-box d-flex flex-wrap padding-24">
                      <div class="sidebar-wrapper">
                        <div class="sticky-top">
                           <div class="sidebar-inside">
                              <ul class="nav-menu-list" role="tablist">
                                  <li class="nav-menu-item active">
                                    <a href="{% url basenamespace|add:':policy_index' %}" class="nav-menu-box" id="c-configurations" data-toggle="tab" >
                                       <div class="nav-menu-icon">
                                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                             <path d="M5.83301 4.16667H17.4997V5.83333H5.83301V4.16667ZM5.83301 10.8333V9.16667H17.4997V10.8333H5.83301ZM3.33301 3.75C3.66453 3.75 3.98247 3.8817 4.21689 4.11612C4.45131 4.35054 4.58301 4.66848 4.58301 5C4.58301 5.33152 4.45131 5.64946 4.21689 5.88388C3.98247 6.1183 3.66453 6.25 3.33301 6.25C3.00149 6.25 2.68354 6.1183 2.44912 5.88388C2.2147 5.64946 2.08301 5.33152 2.08301 5C2.08301 4.66848 2.2147 4.35054 2.44912 4.11612C2.68354 3.8817 3.00149 3.75 3.33301 3.75ZM3.33301 8.75C3.66453 8.75 3.98247 8.8817 4.21689 9.11612C4.45131 9.35054 4.58301 9.66848 4.58301 10C4.58301 10.3315 4.45131 10.6495 4.21689 10.8839C3.98247 11.1183 3.66453 11.25 3.33301 11.25C3.00149 11.25 2.68354 11.1183 2.44912 10.8839C2.2147 10.6495 2.08301 10.3315 2.08301 10C2.08301 9.66848 2.2147 9.35054 2.44912 9.11612C2.68354 8.8817 3.00149 8.75 3.33301 8.75ZM5.83301 15.8333V14.1667H17.4997V15.8333H5.83301ZM3.33301 13.75C3.66453 13.75 3.98247 13.8817 4.21689 14.1161C4.45131 14.3505 4.58301 14.6685 4.58301 15C4.58301 15.3315 4.45131 15.6495 4.21689 15.8839C3.98247 16.1183 3.66453 16.25 3.33301 16.25C3.00149 16.25 2.68354 16.1183 2.44912 15.8839C2.2147 15.6495 2.08301 15.3315 2.08301 15C2.08301 14.6685 2.2147 14.3505 2.44912 14.1161C2.68354 13.8817 3.00149 13.75 3.33301 13.75Z"/>
                                          </svg>
                                               <span>{% translate 'Configurations' %}</span>
                                       </div>
                                    </a>
                                 </li>
                                  <li class="nav-menu-item">
                                      <a href="{% url basenamespace|add:':result_index' %}" class="nav-menu-box" id="c-anomalies" data-toggle="tab" >
                                           <div class="nav-menu-icon">
                                              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M9.16667 12.5H14.1667V14.1667H9.16667V12.5ZM7.5 5.83333H5.83333V7.5H7.5V5.83333ZM9.16667 10.8333H14.1667V9.16667H9.16667V10.8333ZM9.16667 7.5H14.1667V5.83333H9.16667V7.5ZM7.5 9.16667H5.83333V10.8333H7.5V9.16667ZM17.5 4.16667V15.8333C17.5 16.75 16.75 17.5 15.8333 17.5H4.16667C3.25 17.5 2.5 16.75 2.5 15.8333V4.16667C2.5 3.25 3.25 2.5 4.16667 2.5H15.8333C16.75 2.5 17.5 3.25 17.5 4.16667ZM15.8333 4.16667H4.16667V15.8333H15.8333V4.16667ZM7.5 12.5H5.83333V14.1667H7.5V12.5Z" fill="#4F6683"/>
                                              </svg>
                                                   <span>{% translate 'Results' %}</span>
                                           </div>
                                      </a>
                                  </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                      <div class="block-content">
                        <div class="block-widget-box">
                            <div class="block-filter-container d-flex flex-wrap align-items-center justify-content-between">
                               <div class="block-filter-left w-auto">
                                  <div class="title">{% translate 'Create a new Configuration' %}</div>
                               </div>
                        </div>
                            <div class="bw-body">
                                   <div class="content-row-container">
                                        <div class="three-column-row d-flex flex-wrap">
                                            <div class="column">
                                                <form class="uniForm" method="POST">
                                                {% csrf_token %}
                                                <div class="form-group">
                                                    {{form.name|as_crispy_field}}
                                                </div>
                                                <div class="form-group">
                                                    {{form.desc|as_crispy_field}}
                                                </div>
                                                <div class="form-group">
                                                    {{form.notes|as_crispy_field}}
                                                </div>
                                                <div class="form-group">
                                                    {{form.config|as_crispy_field}}
                                                </div>
                                                    <div class="cp-widget-btn">
                                                        <button type="submit" class="btn btn-default"><img src="{% static 'gui2/appstore2/images/play.svg' %}" alt="" /> {% translate 'Save' %}</button>
                                                    </div>
                                            </form>
                                            </div>
                                        </div>
                                   </div>
                                </div>


                        </div>
                        <div class="mt-4"></div>
                     </div>

                  </div>
               </div>
            </div>
         </div>
      </div>

{% endblock %}