{% extends "layout/default.html" %}

{% set title = _("Scenario") %}

{% block body %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <div class="card-panel blue-grey darken-1">
<h1>{{_("Scenario")}}</h1>

<table class="white responsive-table">
    <thead>
      <tr>
          <th data-field="name">{{_('Name')}}</th>
          <th data-field="template">{{_('Template')}}</th>
          <th data-field="event">{{_('Event')}}</th>
          <th>{{_('Delete')}}</th>
      </tr>
    </thead>

    <tbody>
      {% for scenario in g.scenarios %}
        <tr>
            <td>{{scenario.name}}</td>
            <td>{{scenario.template}}</td>
            <td>{{scenario.event}}</td>
            <td><a href="{{url_for('core.delete_scenario', id=scenario.id)}}" class="btn {{buttonColor}}">{{_('Delete')}}</a></td>
        </tr>
      {% endfor %}
      <tr>

      </tr>
    </tbody>
  </table>


  <br>
  <form enctype='application/json' action="" method="post">
  <td><input placeholder="{{_('Name')}}" type="text" id="name" name="scenario" required></td>
  <td><a class="waves-effect waves-light btn modal-trigger {{buttonColor}}" href="#modal">{{_('Create')}}</a></td>

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




<div id="modal" class="modal">
  <div class="modal-content">
    <h4>{{_('Add')}}</h4>
    <div class="row">
      <div class="col s12">
          <ul class="tabs">
              <li class="tab col s3"><a class="active" href='#trigger'>{{_('Event')}}</a></li>
              <li class="tab col s3"><a href="#actions">{{_('Actions')}}</a></li>
        </ul>
    </div>
    <div id='trigger'>
       <div class="card-panel white">
         <table class="white responsive-table">
             <thead>
               <tr>
                   <th data-field="name">{{_('Name')}}</th>
                   <th data-field="description">{{_('Description')}}</th>
                   <th>{{_('Use')}}</th>
               </tr>
             </thead>
             <tbody>
               {% if events == [] %}
               <p>{{_('No event in your language')}}</p>
               {% else %}
               {% for event in events %}
               <tr>
                 <th>{{event.name}}</th>
                 <th>{{event.description}}</th>
                 <th><p><input name="event_code" type="radio" id="{{event.name}}" value="{{event.code}}" /><label for="{{event.name}}"></label></p></th>
               </tr>
               {% endfor %}
               {% endif %}




             </tbody>
           </table>
           {% if events == [] %}
              <p>{{_('No event in your language')}}</p>
           {% else %}
           {% for event in events %}
               <div id="{{event.code}}" class="desc" style="display: none;">
                   {% for param in event.params %}
                   <script type="text/javascript">
                       $(document).ready(function(){
                          $("input[name='event_code']").click(function() {
                              var code = $(this).val();
                              $(".desc").hide();
                              $('select[name="param"]').val('');
                              $('input[name="param"]').val('');
                              $("#"+code).show();
                          });
                        });
                   </script>



                   {% if param.type == 'select' %}
                   <p>{{param.name}}</p>
                   <select name="{{event.code}}_param"  class="browser-default">
                     <option></option>
                     {% for p in get_params(param.url) %}
                        <option value="{{param.value}} == {{p.id}}">{{ p[param.variable] }}</option>
                     {% endfor %}
                   </select>
                   {% elif param.type == 'input' %}
                      <label for="{{event.code}}">{{param.name}}</label>
                      <input type="text" name="{{event.code}}_param" placeholder="" value="{{param.value}} == {{request.form.param}}" id="{{param.value}}">
                   {% endif %}
                   {% endfor %}
                 </div>

               {% endfor %}
               {% endif %}

       </div>
    </div>


    <div id='actions'>
      <div class="card-panel white">
        <table class="white responsive-table">
            <thead>
              <tr>
                  <th data-field="name">{{_('Name')}}</th>
                  <th data-field="description">{{_('Description')}}</th>
                  <th>{{_('Use')}}</th>
              </tr>
            </thead>
            <tbody>
              {% if actions == [] %}
                <p>{{_('No action in your language')}}</p>
              {% else %}
              {% for action in actions %}
              <tr>
                <input type="hidden" name="{{action.code}}" value="{{action.url}}">
                <th>{{action.name}}</th>
                <th>{{action.description}}</th>
                <th><p><input name="action" type="radio" id="{{action.name}}" value="{{action.code}}" /><label for="{{action.name}}"></label></p></th>
              </tr>
              {% endfor %}
              {% endif %}



            </tbody>
          </table>
          {% if actions == [] %}
              <p>{{_('No action in your language')}}</p>
          {% else %}
          {% for action in actions %}
              <div id="{{action.code}}" class="desc" style="display: none;">
                  {% for param in action.params %}
                  <script type="text/javascript">
                      $(document).ready(function(){
                         $("input[name='action']").click(function() {
                             var code = $(this).val();
                             $(".desc").hide();
                             $('select[name="param"]').val('');
                             $('input[name="param"]').val('');
                             $("#"+code).show();
                         });
                       });
                  </script>



                  {% if param.type == 'select' %}
                  <p>{{param.name}}</p>
                  <select name="{{action.code}}_param"  class="browser-default">
                    <option></option>
                    {% for p in get_params(param.url) %}
                       <option value="{{p.id}}">{{ p[param.variable] }}</option>
                    {% endfor %}
                  </select>
                  {% elif param.type == 'input' %}
                     <label for="{{action.code}}">{{param.name}}</label>
                     <input type="text" name="{{action.code}}_param" placeholder="" value="{{request.form.param}}" id="{{param.value}}">
                  {% endif %}
                  {% endfor %}
                </div>

              {% endfor %}
              {% endif %}


              <br>
          <button type="submit" name="button" class="btn {{buttonColor}}">{{_('Add')}}</button>
      </div>
    </div>
    </form>
  </div>
</div>





{% endblock %}

{% block script %}


<script>
  $(document).ready(function(){
    $('.modal-trigger').leanModal();
  });
</script>
{% endblock %}
