spaces-settings.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jBPM Suite</title>

  <link href="css/kie-main.css" rel="stylesheet" media="screen, print">

  <!-- debugging tool -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/srambach/classbxr/5456df40/css/classbxr.css">

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <!-- Bootstrap Select -->
  <script src="https//:cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

  <!-- Patternfly -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.1/js/patternfly.min.js"></script>
</head>
<body>

<div class="kie-page">
  <a class="kie-skiplink" href="#kie-main-content">Skip to main content</a>

  <!-- Masthead -->
  <nav class="kie-page__masthead navbar navbar-default navbar-pf " role="navigation">
    <div class="navbar-header ">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">
        <img class="kie-brand-icon" src="images/kie-ide.png" alt="JBoss BPM Suite"/>
      </a>
    </div>

    <div class="collapse navbar-collapse navbar-collapse-1">

      <ul class="nav navbar-nav navbar-iconic">
        <li>
          <a class="nav-item-iconic" href="bpm-home-rh.html" title="Home"><i class="pficon pficon-home"></i></a>
        </li>
      </ul>

      <ul class="nav navbar-nav  kie-yamm">
        <li class="dropdown kie-yamm--fw">
          <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true" tabindex="0">
            Menu
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu kie-yamm__dropdown-menu" aria-labelledby="dropdownMenu2">

            <!-- mega menu sections -->
            <li class="kie-yamm__section col-xs-12 col-md-3">
              <h3 class="kie-yamm__title">Design</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Projects</a></li>
                <li><a href="#">Dashboards</a></li>
              </ul>
            </li>
            <li class="kie-yamm__section col-xs-12 col-md-3">
              <h3 class="kie-yamm__title">Configure</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Deployments</a></li>
                <li><a href="#">Execution Servers</a></li>
              </ul>
            </li>
            <li class="kie-yamm__section col-xs-12 col-md-3 ">
              <h3 class="kie-yamm__title">Manage</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Process Definitions</a></li>
                <li><a href="#">Process Instances</a></li>
                <li><a href="#">Jobs</a></li>
              </ul>
            </li>
            <li class="kie-yamm__section col-xs-12 col-md-3">
              <h3 class="kie-yamm__title">Track</h3>
              <ul class="kie-yamm__subsection">
                <li><a href="#">Task Lists</a></li>
                <li><a href="#">Task Reports</a></li>
                <li><a href="#">Process Reports</a></li>
                <li><a href="#">Business Dashboards</a></li>
          </ul>
            </li>

          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right navbar-iconic">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle nav-item-iconic" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true">
            <span title="Applications" class="fa fa-th"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
            <li><a href="">Application 1</a></li>
            <li><a href="">Application 2</a></li>
            <li><a href="">Application 3</a></li>
          </ul>
        </li>
        <li>
          <a class="nav-item-iconic" href="#help" data-toggle="modal" title="Help"><i class="fa fa-question"></i></a>
        </li>
        <li>
          <a class="nav-item-iconic" href="settings.html" title="Settings"><i class="pficon pficon-equalizer"></i></a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true" tabindex="0">
            <span title="Username" class="pficon pficon-user"></span>
            Brian Johnson
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
            <li><a href="#about" data-toggle="modal">About</a></li>
            <li><a href="#">Log Out</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </nav>

  <main role="main" id="kie-main-content" tabindex="-1" class="kie-page__content ">

    <div class="container-fluid ">
        <!-- Breadcrumb row -->
        <div class="row">
          <div class="col-xs-12">
            <ol class="breadcrumb">
              <li>
                <a href="#">Spaces</a>
              </li>
              <li>
                <a href="#">Space Name</a>
              </li>
              <li>
                <a href="#">Project Name</a>
              </li>
              <li class="active"> <strong>Settings</strong>
              </li>
            </ol>
          </div>
        </div>

        <!-- Page Title row -->
        <div class="row">
          <div class="col-sm-12 page-header kie-page-header"> <!--       page-header page-header-bleed-right  ------->
            <div class="actions pull-right btn-group">
              <button type="button" class="btn btn-default">Build</button>
              <button type="button" class="btn btn-default">Publish</button>
              <button type="button" class="btn btn-default">Deploy</button>
              <button type="button" class="btn btn-default">Sync</button>
              <button type="button" class="btn btn-default"><span class="fa fa-envelope-o"</button>
              <span class="dropdown  dropdown-kebab-pf">
                <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  <span class="fa fa-ellipsis-v"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right " aria-labelledby="dropdownKebab">
                  <li><a href="#">Add Asset</a></li>
                  <li><a href="#">Import Asset</a></li>
                  <li><a href="#">Edit Contributors</a></li>
                  <li><a href="#">Fork</a></li>
                  <li><a href="#">Duplicate</a></li>
                  <li><a href="#">Rename</a></li>
                  <li><a href="#">Delete</a></li>
                </ul>
              </span>

            </div>
            <h1>Project Name</h1>
          </div>
        </div>

        <!-- Tab nav row -->
        <div class="row" >
          <div class="col-xs-12">
            <ul class="nav nav-tabs nav-tabs-pf nav-tabs--settings">
              <li><a href="spaces-assetlist.html">Assets <span class="badge">8</span></a></li>
              <li><a href="spaces-changeRequestList.html">Change Requests <span class="badge">4</span></a></li>
              <li><a href="spaces-contributorlist.html">Contributors <span class="badge">12</span></a></li>
              <li><a href="spaces-metrics.html">Metrics<span class="badge"></span></a></li>
              <li class="active"><a href="spaces-settings.html">Settings<span class="badge"></span></a></li>
            </ul>
          </div>
        </div>

        <!-- Content - Settings List -->
        <div class="row kie-row--is-table">

          <!-- section navigation -->
        <div class="col-xs-12 col-md-3 col--leftnav">
          <nav class="navbar navbar-static nav-stacked nav--left" id="kiePreferences">
            <ul class="nav" role="tablist" >
              <li class="active"><a href="#kieSettingsGeneral" data-toggle="tab">General <sup>*</sup></a></li>
              <li><a href="#kieSettingsDependencies" data-toggle="tab">Dependencies</a></li>
              <li><a href="#kieSettingsKnowledgeBase" data-toggle="tab">Knowledge Bases <sup>*</sup></a></li>
              <li><a href="#kieSettingsExternalData" data-toggle="tab">External Data Objects</a></li>
              <li><a href="#kieSettingsValidation" data-toggle="tab">Validation <sup>*</sup></a></li>
              <li><a href="#kieSettingsDeployments" data-toggle="tab">Deployments</a></li>
              <li><a href="#kieSettingsPersistence" data-toggle="tab">Persistence</a></li>
          </nav>
            </ul>
            <button type="submit" class="btn btn-default btn-primary">
              Save
            </button>
          &nbsp;
            <button type="reset" class="btn btn-default">
              Reset
            </button>
          <br/>
          <br/>
        </div>

          <!-- Content - settings -->
        <div class="col-xs-12 col-md-9 tab-content" >

          <!-- GENERAL -->
          <div class="tab-pane kie-tab-pane active"  id="kieSettingsGeneral">
                <h3>
                    General
                </h3>
            <p>Lorem ipsum bacon dolor sausage. </p>
            <hr/>
                  <form role="form">

                    <div class="form-group">
                      <label for="kieSettingsInputName"> Name</label>
                      <input type="text" class="form-control" id="kieSettingsInputName" placeholder="Enter a project name">
                    </div>

                    <div class="form-group">
                      <label for="kieSettingsInputDescription"> Description</label>
                      <textarea class="form-control" id="kieSettingsInputDescription" rows="3" placeholder="Enter a project description"></textarea>
                    </div>

                    <div class="form-group">
                      <label for="kieSettingsInputGitHub">GitHub</label>
                      <div class="input-group">
                        <input type="text" class="form-control" id="kieSettingsInputGitHub" placeholder="Enter the GitHub location">
                        <span class="input-group-btn">
                          <button class="btn btn-default" type="button">
                            <span class="fa fa-file-archive-o"></span>
                          </button>
                        </span>
                      </div>

                    </div>

                    <div class="checkbox">
                      <label>
                        <input type="checkbox" checked id="kieSettingsDisableGAV"> Disable GAV conflict check
                      </label>
                    </div>

                    <div class="checkbox">
                      <label>
                        <input type="checkbox" checked id="kieSettingsAllowChildGAV"> Allow child GAV edition
                      </label>
                    </div>

                    <!-- GROUP ARTIFACT VERSION -->
                    <!--<h3>Group Artifact Version</h3>-->
                    <div class="form-group">
                      <label class=control-label" for="kieSettingsInputGroupID">
                        Group ID &nbsp;
                        <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title=""
                           data-content="A universally unique identifier for a project. It is normal to use a fully-qualified package name to distinguish it from other projects with a similar name."
                           data-placement="top">
                          <span class="pficon pficon-info"></span>
                        </a>
                      </label>
                      <input type="text" class="form-control" id="kieSettingsInputGroupID">
                      <p class="help-block">Example: com.myorganization.myprojects</p>
                    </div>

                    <div class="form-group">
                      <label for="kieSettingsInputArtifactID">
                        Artifact ID &nbsp;
                        <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title=""
                           data-content="The identifier for this artifact blah blah blah"
                           data-placement="top">
                          <span class="pficon pficon-info"></span>
                        </a>
                      </label>
                      <input type="text" class="form-control" id="kieSettingsInputArtifactID">
                      <p class="help-block">Example: MyProject</p>
                    </div>

                    <div class="form-group">
                      <label for="kieSettingsInputVersion">Version</label>
                      <input type="text" class="form-control" id="kieSettingsInputVersion">
                      <p class="help-block">Example: 1.0.0</p>
                    </div>
                  </form>

          </div>

          <!-- DEPENDENCIES -->
          <div class="tab-pane kie-tab-pane" id="kieSettingsDependencies">
            <h3>
                Dependencies
            </h3>
            <p>
              Lorem ipsum banana orange papaya dolor sunt.
            </p>
            <hr/>
            <table class="table table-hover kie-tablelist">
              <thead>
                <tr class="kie-tablelist__row kie-tablelist__row--header">
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Group ID</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Artifact ID</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Version</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Package White List</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                    <!-- no label -->
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr class="kie-tablelist__row">
                  <td class="kie-tablelist__cell">AA12324567890</td>
                  <td class="kie-tablelist__cell">987654fOO321</td>
                  <td class="kie-tablelist__cell">Version 1.0.0</td>
                  <td class="kie-tablelist__cell">
                    <label class="radio-inline">
                      <input checked type="radio" name="inlineRadioOptions1" id="inlineRadio1-1" value="option1"> All
                    </label>
                    <label class="radio-inline">
                      <input type="radio" name="inlineRadioOptions1" id="inlineRadio1-2" value="option3"> None
                    </label>
                  </td>
                  <td class="kie-tablelist__cell--actions">
                    <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                  </td>
                </tr>
                <tr class="kie-tablelist__row">
                  <td class="kie-tablelist__cell">BB8888888888</td>
                  <td class="kie-tablelist__cell">8675309</td>
                  <td class="kie-tablelist__cell">Version 1.0.1</td>
                  <td class="kie-tablelist__cell">
                    <label class="radio-inline">
                      <input type="radio" name="inlineRadioOptions2" id="inlineRadio2-1" value="option1"> All
                    </label>
                    <label class="radio-inline">
                      <input checked type="radio" name="inlineRadioOptions2" id="inlineRadio2-2" value="option3"> None
                    </label>
                  </td>
                  <td class="kie-tablelist__cell--actions">
                    <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                  </td>
                </tr>
              </tbody>

            </table>

            <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add dependency</button>
            <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add from repository</button>
          </div>

          <!-- KNOWLEDGE BASES -->
          <div class="tab-pane kie-tab-pane" id="kieSettingsKnowledgeBase">
                <h4>
                    Knowledge Bases
                </h4>
            <p>Lorem ipsum squirrel chipmunk acorn rabbit dolor sunt.</p>
            <hr/>
              <table class="table table-hover kie-tablelist">
                <thead>
                <tr class="kie-tablelist__row kie-tablelist__row--header">
                  <th class="kie-tablelist__cell kie-tablelist__cell--header ">
                    <div class="kie-tablelist__select">Default</div>
                  </th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Name</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Included Knowledge Bases</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Package</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Equal Behavior</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Event Processing Model</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Knowledge Sessions</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr class="kie-tablelist__row ">
                  <td class="kie-tablelist__cell ">
                    <div class="kie-tablelist__select">
                      <input type="radio" name="kieKnowledgeBaseDefaultRadio">
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">Added</td>
                  <td class="kie-tablelist__cell ">
                    <div class="text-nowrap">Included <span class="fa fa-times"></span></div>
                    <div><a href="#0"><span class="pficon pficon-add-circle-o"></span> Add</a></div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="text-nowrap">packages.have.long.names.with.com.in.them <span class="fa fa-times"></span></div>
                    <div class="text-nowrap">packages.have.long.names.with.com.in.them <span class="fa fa-times"></span></div>
                    <div class="text-nowrap">packages.have.long.names.with.com.in.them <span class="fa fa-times"></span></div>
                    <div class="text-nowrap"><a href="#0"><span class="pficon pficon-add-circle-o"></span> Add</a></div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="form-group">
                      <!--<label for="kieSettingsEqualsBehavior">Runtime Strategy</label>-->
                      <select class="selectpicker form-control" id="kieSettingsEqualsBehavior">
                        <option>Identity</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="form-group">
                      <!--<label for="kieSettingsEventProcessingModel">Event Processing Model</label>-->
                      <select class="selectpicker form-control" id="kieSettingsEventProcessingModel">
                        <option>Cloud</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div>
                      <a href="#settings-knowledge-sessions" data-toggle="modal" title="Knowledge Sessions">Knowledge Sessions (2)</a>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                  </td>
                </tr>
                <tr class="kie-tablelist__row ">
                  <td class="kie-tablelist__cell ">
                    <div class="kie-tablelist__select">
                      <input type="radio" name="kieKnowledgeBaseDefaultRadio">
                    </div>

                  </td>
                  <td class="kie-tablelist__cell ">Added</td>
                  <td class="kie-tablelist__cell ">
                    <div class="text-nowrap">Included <span class="fa fa-times"></span></div>
                    <div class="text-nowrap">Included <span class="fa fa-times"></span></div>
                    <div class="text-nowrap">Included <span class="fa fa-times"></span></div>
                    <a href="#0"><span class="pficon pficon-add-circle-o"></span> Add</a>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="text-nowrap">packages.have.long.names.with.com.in.them <span class="fa fa-times"></span></div>
                    <div class="text-nowrap"><a href="#0"><span class="pficon pficon-add-circle-o"></span> Add</a></div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="form-group">
                      <!--<label for="kieSettingsEqualsBehavior">Runtime Strategy</label>-->
                      <select class="selectpicker form-control" id="kieSettingsEqualsBehavior">
                        <option>Identity</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="form-group">
                      <!--<label for="kieSettingsEventProcessingModel">Event Processing Model</label>-->
                      <select class="selectpicker form-control" id="kieSettingsEventProcessingModel">
                        <option>Cloud</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div>
                      <a href="#settings-knowledge-sessions" data-toggle="modal" title="Knowledge Sessions">Knowledge Sessions (2)</a>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                  </td>
                </tr>
                <tr class="kie-tablelist__row ">
                  <td class="kie-tablelist__cell ">
                    <div class="kie-tablelist__select">
                      <input type="radio" name="kieKnowledgeBaseDefaultRadio">
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">Added</td>
                  <td class="kie-tablelist__cell ">
                    <a href="#0"><span class="pficon pficon-add-circle-o"></span> Add</a>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="text-nowrap"><a href="#0"><span class="pficon pficon-add-circle-o"></span> Add</a></div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="form-group">
                      <!--<label for="kieSettingsEqualsBehavior">Runtime Strategy</label>-->
                      <select class="selectpicker form-control" id="kieSettingsEqualsBehavior">
                        <option>Identity</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div class="form-group">
                      <select class="selectpicker form-control" id="kieSettingsEventProcessingModel">
                        <option>Cloud</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div>
                      <a href="#settings-knowledge-sessions" data-toggle="modal" title="Knowledge Sessions">Knowledge Sessions (2)</a>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                  </td>
                </tr>
                </tbody>

              </table>
            <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add knowledge base</button>
          </div>

          <!-- EXTERNAL DATA OBJECTS -->
          <div class="tab-pane kie-tab-pane" id="kieSettingsExternalData">
                <h3>
                    External Data Objects
                </h3>
            <p>Lorem ipsum chevy tesla ford radiator tire pontiac dolor sunt.</p>
            <hr/>
                  <table class="table table-hover kie-tablelist">
                    <thead>
                    <tr class="kie-tablelist__row kie-tablelist__row--header">
                      <th class="kie-tablelist__cell kie-tablelist__cell--header">Type</th>
                      <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                        <!--<a href="#0">Delete selected</a>-->
                      </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="kie-tablelist__row">
                      <td class="kie-tablelist__cell">java.lang.Double</td>
                      <td class="kie-tablelist__cell--actions">
                        <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                      </td>
                    </tr>
                    <tr class="kie-tablelist__row">
                      <td class="kie-tablelist__cell">java.lang.Integer</td>
                      <td class="kie-tablelist__cell--actions">
                        <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                      </td>
                    </tr>
                    <tr class="kie-tablelist__row">
                      <td class="kie-tablelist__cell">java.lang.Number</td>
                      <td class="kie-tablelist__cell--actions">
                        <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                      </td>
                    </tr>
                    <tr class="kie-tablelist__row">
                      <td class="kie-tablelist__cell">java.lang.String</td>
                      <td class="kie-tablelist__cell--actions">
                        <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                      </td>
                    </tr>
                    <tr class="kie-tablelist__row">
                      <td class="kie-tablelist__cell">java.lang.ArrayList</td>
                      <td class="kie-tablelist__cell--actions">
                        <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                      </td>
                    </tr>
                    <tr class="kie-tablelist__row">
                      <td class="kie-tablelist__cell">java.lang.Collection</td>
                      <td class="kie-tablelist__cell--actions">
                        <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                      </td>
                    </tr>
                    </tbody>

                  </table>

            <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add external data object</button>
          </div>

          <!-- VALIDATION -->
          <div class="tab-pane kie-tab-pane" id="kieSettingsValidation">
                <h3>
                    Validation
                </h3>
                  <p>These Maven Repositories are used to check the uniqueness of a Project's GAV when (1) creating a new Project or Module, (2) Installing or Deploying a Project to a Maven Repository.
                  </p>
            <hr/>
              <table class="table table-hover kie-tablelist">
                <thead>
                <tr class="kie-tablelist__row kie-tablelist__row--header">
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">
                    <div class="kie-tablelist__select">
                      Include
                    </div>
                  </th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">ID</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">URL</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header">Source</th>
                </tr>
                </thead>
                <tbody>
                <tr class="kie-tablelist__row">
                  <td class="kie-tablelist__cell">
                    <div class="kie-tablelist__select">
                      <input type="checkbox">
                    </div>
                  </td>
                  <td class="kie-tablelist__cell">guvnor-m2-repo</td>
                  <td class="kie-tablelist__cell">http://kieci-02.lab.eng.brq.redhat.com:32828/kie-wb/maven2/</td>
                  <td class="kie-tablelist__cell">Project</td>
                </tr>
                <tr class="kie-tablelist__row">
                  <td class="kie-tablelist__cell">
                    <div class="kie-tablelist__select">
                      <input type="checkbox">
                    </div>
                  </td>
                  <td class="kie-tablelist__cell">guvnor-m2-repo</td>
                  <td class="kie-tablelist__cell">http://kieci-02.lab.eng.brq.redhat.com:32828/kie-wb/maven2/</td>
                  <td class="kie-tablelist__cell">Project</td>
                </tr>
                <tr class="kie-tablelist__row">
                  <td class="kie-tablelist__cell">
                    <div class="kie-tablelist__select">
                      <input type="checkbox">
                    </div>
                  </td>
                  <td class="kie-tablelist__cell">guvnor-m2-repo</td>
                  <td class="kie-tablelist__cell">http://kieci-02.lab.eng.brq.redhat.com:32828/kie-wb/maven2/</td>
                  <td class="kie-tablelist__cell">Project</td>
                </tr>
                </tbody>

              </table>

          </div>

          <!-- DEPLOYMENTS -->
          <div class="tab-pane kie-tab-pane" id="kieSettingsDeployments">
                <h3>
                    Deployments
                </h3>
            <p>Lorem ipsum crimson beige kumquat mauve dolor sunt.</p>
            <hr/>
            <form role="form">

              <div class="form-group">
                <label for="kieSettingsInputRuntimeStrategy">Runtime Strategy</label>
                  <select class="selectpicker form-control" id="kieSettingsInputRuntimeStrategy">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                    <option>Onions</option>
                    <option>Mushrooms</option>
                    <option>Pickles</option>
                    <option>Mayonnaise</option>
                    <option data-divider="true"></option>
                    <option data-subtext="Hot">Tabasco</option>
                    <option data-subtext="Hotter" disabled>Sriracha</option>
                    <option data-subtext="Hottest">Wasabi</option>
                  </select>
              </div>

              <div class="form-group">
                <label for="kieSettingsInputPersistence">Persistence Unit Name</label>
                <input type="text" class="form-control" id="kieSettingsInputPersistence">
              </div>

              <div class="form-group">
                <label for="kieSettingsInputPersistenceMode">Persistence Mode</label>
                <select class="selectpicker form-control" id="kieSettingsInputPersistenceMode">
                  <option>Mustard</option>
                  <option>Ketchup</option>
                  <option>Relish</option>
                  <option>Onions</option>
                  <option>Mushrooms</option>
                  <option>Pickles</option>
                  <option>Mayonnaise</option>
                  <option data-divider="true"></option>
                  <option data-subtext="Hot">Tabasco</option>
                  <option data-subtext="Hotter" disabled>Sriracha</option>
                  <option data-subtext="Hottest">Wasabi</option>
                </select>
              </div>

              <div class="form-group">
                <label for="kieSettingsInputAuditPersistence">Audit Persistence Unit Name</label>
                <input type="text" class="form-control" id="kieSettingsInputAuditPersistence">
              </div>

              <div class="form-group">
                <label for="kieSettingsInputAuditMode">Audit Mode</label>
                <select class="selectpicker form-control" id="kieSettingsInputAuditMode">
                  <option>Mustard</option>
                  <option>Ketchup</option>
                  <option>Relish</option>
                  <option>Onions</option>
                  <option>Mushrooms</option>
                  <option>Pickles</option>
                  <option>Mayonnaise</option>
                  <option data-divider="true"></option>
                  <option data-subtext="Hot">Tabasco</option>
                  <option data-subtext="Hotter" disabled>Sriracha</option>
                  <option data-subtext="Hottest">Wasabi</option>
                </select>
              </div>

              <br/>

              <!-- MARSHALLING STRATEGIES -->
              <h3>Marshalling Strategies </h3>
                <table class="table table-hover kie-tablelist">
                  <thead>
                  <tr class="kie-tablelist__row kie-tablelist__row--header">
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Name</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Resolver</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Parameters</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                      <!-- no label -->
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  </tbody>

                </table>

              <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add Marshalling Strategy</button>

              <br/>
              <br/>

              <!-- EVENT LISTENERS -->
              <h3>Event Listeners</h3>
                <table class="table table-hover kie-tablelist">
                  <thead>
                  <tr class="kie-tablelist__row kie-tablelist__row--header">
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Name</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Resolver</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Parameters</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                      <!-- no label -->
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  </tbody>

                </table>

              <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add Event Listener</button>
              <br/>
              <br/>

              <!-- GLOBAL -->
              <h3>Global</h3>
                <table class="table table-hover kie-tablelist">
                  <thead>
                  <tr class="kie-tablelist__row kie-tablelist__row--header">
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Name</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Resolver</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Parameters</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                      <!-- no label -->
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  </tbody>

                </table>

              <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add Global</button>
              <br/>
              <br/>

              <!-- REQUIRED ROLES -->
              <h3>Required Roles</h3>
                <table class="table table-hover kie-tablelist">
                  <thead>
                  <tr class="kie-tablelist__row kie-tablelist__row--header">
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Name</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Resolver</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Parameters</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                      <!-- no label -->
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">org.drools.persistence.jpa.marshaller</td>
                    <td class="kie-tablelist__cell">
                      <select class="selectpicker form-control" id="kieSettingsInputMarshallingStrategies">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                        <option>Onions</option>
                        <option>Mushrooms</option>
                        <option>Pickles</option>
                        <option>Mayonnaise</option>
                        <option data-divider="true"></option>
                        <option data-subtext="Hot">Tabasco</option>
                        <option data-subtext="Hotter" disabled>Sriracha</option>
                        <option data-subtext="Hottest">Wasabi</option>
                      </select>
                    </td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">Parameters (2)</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  </tbody>

                </table>

              <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add Required Role</button>

            </form>
            <br/>

            </div>

          <!-- PERSISTENCE -->
          <div class="tab-pane kie-tab-pane" id="kieSettingsPersistence">
            <h3>
              Persistence
            </h3>
            <p>Lorem puella agricola rana bellum veritas sunt.</p>
            <hr/>

            <form role="form">

              <div class="form-group">
                <label for="kieSettingsInputPersistenceUnit">Persistence Unit</label>
                <input type="text" class="form-control" id="kieSettingsInputPersistenceUnit">
              </div>

              <div class="form-group">
                <label for="kieSettingsInputAuditPersistenceProvider">Persistence Provider</label>
                <input type="text" class="form-control" id="kieSettingsInputAuditPersistenceProvider">
              </div>

              <div class="form-group">
                <label for="kieSettingsInputAuditPersistenceDataSource">Data Source</label>
                <input type="text" class="form-control" id="kieSettingsInputAuditPersistenceDataSource">
              </div>
<br/>
              <!-- PROPERTIES -->
              <h3>Properties</h3>
                <table class="table table-hover  kie-tablelist">
                  <thead>
                  <tr class="kie-tablelist__row kie-tablelist__row--header">
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Name</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Value</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                      <!-- no label -->
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">hibernate.max_fetch_depth</td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">org.hibernate.dialect.H2Dialect</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">hibernate.hbm2ddl.auto</td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">org.hibernate.dialect.H2Dialect</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">hibernate.show_sql</td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">org.hibernate.dialect.H2Dialect</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">hibernate.id.new_generator_mappings</td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">org.hibernate.dialect.H2Dialect</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">hibernate.transaction.jta.platform</td>
                    <td class="kie-tablelist__cell">
                      <a href="#0">org.hibernate.dialect.H2Dialect</a>
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  </tbody>

                </table>

              <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add property</button>
<br/>
              <!-- PROJECT PERSISTABLE DATA OBJECTS -->
              <h3>Project Persistable Data Objects</h3>
                <table class="table table-hover  kie-tablelist">
                  <thead>
                  <tr class="kie-tablelist__row kie-tablelist__row--header">
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Class Name</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header">Something</th>
                    <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions">
                      <!-- no label -->
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="kie-tablelist__row">
                    <td class="kie-tablelist__cell">Class Name</td>
                    <td class="kie-tablelist__cell">
                      Something
                    </td>
                    <td class="kie-tablelist__cell--actions">
                      <a href="#0" class="btn btn-link"><span class="fa fa-trash-o"></span></a>
                    </td>
                  </tr>
                  </tbody>

                </table>

              <button type="button" class="btn btn-link"><span class="pficon pficon-add-circle-o"></span> Add project persistable data object</button>

            </form>
            <br/>


          </div>
        </div>

        </div>

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

</div><!-- kie-page -->

<!-- Settings - Knowledge Sessions Modal -->
<div class="modal fade" id="settings-knowledge-sessions">
  <div class="modal-dialog" style="width:90%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">Knowledge Sessions</h4>
      </div>
      <div class="modal-body">

<!-- tiagos code -->
        <div class="list-group list-view-pf list-view-pf-view list-view-pf--header" data-field="">
          <div class="list-group-item">
            <div class="list-view-pf-checkbox">
              Default
            </div>
            <div class="list-view-pf-actions">
              <a href="#0" class="btn btn-link" data-field="remove-button">
                <span class="fa fa-trash-o"></span>
              </a>
            </div>
            <div class="list-view-pf-main-info">
              <div class="list-view-pf-body">
                <div class="list-view-pf-additional-info">
                  <div class="list-view-pf-additional-info-item ksessions-list-group-item-text-content">
                    Name
                  </div>
                  <div class="list-view-pf-additional-info-item ksessions-list-group-item-text-content">
                    State
                  </div>
                  <div class="list-view-pf-additional-info-item ksessions-list-group-item-text-content">
                    Clock
                  </div>
                </div>
                <div class="list-view-pf-additional-info">
                  <div class="list-view-pf-additional-info-item">
                    Listeners
                  </div>
                  <div class="list-view-pf-additional-info-item">
                    Work Item Handlers
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="list-group list-view-pf list-view-pf-view" data-field="knowledge-sessions-table">
          <div class="list-group-item" data-i18n-prefix="KnowledgeSessionListItemView.">
            <div class="list-view-pf-checkbox">
              <input type="radio" data-field="is-default" name="kieKnowledgeSessionDefaultRadio">
            </div>
            <div class="list-view-pf-actions">
              <a href="#0" class="btn btn-link" data-field="remove-button">
                <span class="fa fa-trash-o"></span>
              </a>
            </div>

            <div class="list-view-pf-main-info">
              <div class="list-view-pf-body">
                <!--<div class="list-view-pf-description">-->
                  <!--<div class="list-group-item-text ksessions-list-group-item-text-content">-->
                    <!--&lt;!&ndash;<input type="radio" data-field="is-default" name="kieKnowledgeSessionDefaultRadio">&ndash;&gt;-->
                    <!--<input type="text" data-field="name" placeholder="Name">-->
                    <!--<input type="text" data-field="type" placeholder="State">-->
                    <!--<div data-field="clock-select-container">-->
                      <!--<div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">-->
                        <!--<div class="btn-group bootstrap-select form-control">-->
                          <!--<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Realtime">-->
                            <!--<span class="filter-option pull-left">Realtime</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>-->
                          <!--</button>-->
                          <!--<div class="dropdown-menu open">-->
                            <!--<ul class="dropdown-menu inner" role="menu">-->
                              <!--<li data-original-index="0">-->
                                <!--<a tabindex="0" class="" style="" data-tokens="null"><span class="text">Pseudo</span><span class="glyphicon glyphicon-ok check-mark"></span></a>-->
                              <!--</li>-->
                              <!--<li data-original-index="1" class="selected">-->
                                <!--<a tabindex="0" class="" style="" data-tokens="null"><span class="text">Realtime</span><span class="glyphicon glyphicon-ok check-mark"></span></a>-->
                              <!--</li>-->
                            <!--</ul>-->
                          <!--</div>-->
                          <!--<select class="selectpicker form-control" tabindex="-98" data-field="select">-->
                            <!--<option data-field="option" data-i18n-prefix="KieSelectElementView." value="PSEUDO">Pseudo</option>-->
                            <!--<option data-field="option" data-i18n-prefix="KieSelectElementView." value="REALTIME">Realtime</option>-->
                          <!--</select></div>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
                <div class="list-view-pf-additional-info">
                  <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item--modal ksessions-list-group-item-text-content">
                    <!--<input type="radio" data-field="is-default" name="kieKnowledgeSessionDefaultRadio">-->
                    <input type="text" data-field="name" placeholder="Name">
                  </div>
                  <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item--modal ksessions-list-group-item-text-content">
                    <input type="text" data-field="type" placeholder="State">
                  </div>
                  <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item--modal ksessions-list-group-item-text-content">
                    <div data-field="clock-select-container">
                        <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                          <div class="btn-group bootstrap-select form-control">
                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Realtime">
                              <span class="filter-option pull-left">Realtime</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                            </button>
                            <div class="dropdown-menu open">
                              <ul class="dropdown-menu inner" role="menu">
                                <li data-original-index="0">
                                  <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Pseudo</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                                </li>
                                <li data-original-index="1" class="selected">
                                  <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Realtime</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                                </li>
                              </ul>
                            </div>
                            <select class="selectpicker form-control" tabindex="-98" data-field="select">
                              <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PSEUDO">Pseudo</option>
                              <option data-field="option" data-i18n-prefix="KieSelectElementView." value="REALTIME">Realtime</option>
                            </select></div>
                        </div>
                      </div>
                  </div>
                </div>
                <div class="list-view-pf-additional-info">
                  <div class="list-view-pf-additional-info-item">
                    <div class="list-view-pf-expand" data-field="listeners-button">
                      <span class="fa fa-angle-right"></span>
                      <strong data-field="listeners-count">4</strong> Listeners
                    </div>
                  </div>
                  <div class="list-view-pf-additional-info-item">
                    <div class="list-view-pf-expand" data-field="work-item-handlers-button">
                      <span class="fa fa-angle-right"></span>
                      <strong data-field="work-item-handlers-count">1</strong> Work Item Handlers
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-group-item-container container-fluid hidden">
              <div class="close">
                <span class="pficon pficon-close"></span>
              </div>

              <br>
              <br>

              <table class="table table-hover kie-tablelist">
                <thead>
                <tr>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Type">Type</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Kind">Kind</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions"></th>
                </tr>
                </thead>
                <tbody data-field="listeners-container">
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Process Event Listener">
                            <span class="filter-option pull-left">Process Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Agenda Event Listener">
                            <span class="filter-option pull-left">Agenda Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Rule Runtime Event Listener">
                            <span class="filter-option pull-left">Rule Runtime Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Rule Runtime Event Listener">
                            <span class="filter-option pull-left">Rule Runtime Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                </tbody>
              </table>
              <div>
                <button type="button" class="btn btn-link" data-field="add-listener-button">
                  <span class="pficon pficon-add-circle-o"></span>
                  <span data-i18n-key="AddListener">Add Listener</span>
                </button>
              </div>
            </div>

            <div class="list-group-item-container container-fluid hidden">
              <div class="close">
                <span class="pficon pficon-close"></span>
              </div>

              <br>
              <br>

              <table class="table table-hover kie-tablelist">
                <thead>
                <tr>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Type">Type</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Name">Name</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions"></th>
                </tr>
                </thead>
                <tbody data-field="work-item-handlers-container">
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="WorkItemHandlerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="name">
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                </tbody>
              </table>
              <div>
                <button type="button" class="btn btn-link" data-field="add-work-item-handler-button">
                  <span class="pficon pficon-add-circle-o"></span>
                  <span data-i18n-key="AddWorkItemHandler">Add Work Item Handler</span>
                </button>
              </div>
            </div>
          </div>
          <div class="list-group-item" data-i18n-prefix="KnowledgeSessionListItemView.">
            <div class="list-view-pf-checkbox">
              <input type="radio" data-field="is-default" name="kieKnowledgeSessionDefaultRadio">
            </div>
            <div class="list-view-pf-actions">
              <a href="#0" class="btn btn-link" data-field="remove-button">
                <span class="fa fa-trash-o"></span>
              </a>
            </div>

            <div class="list-view-pf-main-info">
              <div class="list-view-pf-body">
                <!--<div class="list-view-pf-description">-->
                <!--<div class="list-group-item-text ksessions-list-group-item-text-content">-->
                <!--&lt;!&ndash;<input type="radio" data-field="is-default" name="kieKnowledgeSessionDefaultRadio">&ndash;&gt;-->
                <!--<input type="text" data-field="name" placeholder="Name">-->
                <!--<input type="text" data-field="type" placeholder="State">-->
                <!--<div data-field="clock-select-container">-->
                <!--<div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">-->
                <!--<div class="btn-group bootstrap-select form-control">-->
                <!--<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Realtime">-->
                <!--<span class="filter-option pull-left">Realtime</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>-->
                <!--</button>-->
                <!--<div class="dropdown-menu open">-->
                <!--<ul class="dropdown-menu inner" role="menu">-->
                <!--<li data-original-index="0">-->
                <!--<a tabindex="0" class="" style="" data-tokens="null"><span class="text">Pseudo</span><span class="glyphicon glyphicon-ok check-mark"></span></a>-->
                <!--</li>-->
                <!--<li data-original-index="1" class="selected">-->
                <!--<a tabindex="0" class="" style="" data-tokens="null"><span class="text">Realtime</span><span class="glyphicon glyphicon-ok check-mark"></span></a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<select class="selectpicker form-control" tabindex="-98" data-field="select">-->
                <!--<option data-field="option" data-i18n-prefix="KieSelectElementView." value="PSEUDO">Pseudo</option>-->
                <!--<option data-field="option" data-i18n-prefix="KieSelectElementView." value="REALTIME">Realtime</option>-->
                <!--</select></div>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <div class="list-view-pf-additional-info">
                  <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item--modal ksessions-list-group-item-text-content">
                    <!--<input type="radio" data-field="is-default" name="kieKnowledgeSessionDefaultRadio">-->
                    <input type="text" data-field="name" placeholder="Name">
                  </div>
                  <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item--modal ksessions-list-group-item-text-content">
                    <input type="text" data-field="type" placeholder="State">
                  </div>
                  <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item--modal ksessions-list-group-item-text-content">
                    <div data-field="clock-select-container">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Realtime">
                            <span class="filter-option pull-left">Realtime</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Pseudo</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Realtime</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PSEUDO">Pseudo</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="REALTIME">Realtime</option>
                          </select></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list-view-pf-additional-info">
                  <div class="list-view-pf-additional-info-item">
                    <div class="list-view-pf-expand" data-field="listeners-button">
                      <span class="fa fa-angle-right"></span>
                      <strong data-field="listeners-count">4</strong> Listeners
                    </div>
                  </div>
                  <div class="list-view-pf-additional-info-item">
                    <div class="list-view-pf-expand" data-field="work-item-handlers-button">
                      <span class="fa fa-angle-right"></span>
                      <strong data-field="work-item-handlers-count">1</strong> Work Item Handlers
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-group-item-container container-fluid hidden">
              <div class="close">
                <span class="pficon pficon-close"></span>
              </div>

              <br>
              <br>

              <table class="table table-hover kie-tablelist">
                <thead>
                <tr>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Type">Type</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Kind">Kind</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions"></th>
                </tr>
                </thead>
                <tbody data-field="listeners-container">
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Process Event Listener">
                            <span class="filter-option pull-left">Process Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Agenda Event Listener">
                            <span class="filter-option pull-left">Agenda Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Rule Runtime Event Listener">
                            <span class="filter-option pull-left">Rule Runtime Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="ListenerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <div data-field="kind-select-container" class="form-group">
                      <div class="btn-group bootstrap-select form-control" data-field="root" data-i18n-prefix="KieSelectElementView.">
                        <div class="btn-group bootstrap-select form-control">
                          <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Rule Runtime Event Listener">
                            <span class="filter-option pull-left">Rule Runtime Event Listener</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                          </button>
                          <div class="dropdown-menu open">
                            <ul class="dropdown-menu inner" role="menu">
                              <li data-original-index="0">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Agenda Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="1" class="selected">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Rule Runtime Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                              <li data-original-index="2">
                                <a tabindex="0" class="" style="" data-tokens="null"><span class="text">Process Event Listener</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                              </li>
                            </ul>
                          </div>
                          <select class="selectpicker form-control" tabindex="-98" data-field="select">
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="AGENDA_EVENT_LISTENER">Agenda Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="RULE_RUNTIME_EVENT_LISTENER">Rule Runtime Event Listener</option>
                            <option data-field="option" data-i18n-prefix="KieSelectElementView." value="PROCESS_EVENT_LISTENER">Process Event Listener</option>
                          </select></div>
                      </div>
                    </div>
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                </tbody>
              </table>
              <div>
                <button type="button" class="btn btn-link" data-field="add-listener-button">
                  <span class="pficon pficon-add-circle-o"></span>
                  <span data-i18n-key="AddListener">Add Listener</span>
                </button>
              </div>
            </div>

            <div class="list-group-item-container container-fluid hidden">
              <div class="close">
                <span class="pficon pficon-close"></span>
              </div>

              <br>
              <br>

              <table class="table table-hover kie-tablelist">
                <thead>
                <tr>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Type">Type</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header" data-i18n-key="Name">Name</th>
                  <th class="kie-tablelist__cell kie-tablelist__cell--header kie-tablelist__cell--actions"></th>
                </tr>
                </thead>
                <tbody data-field="work-item-handlers-container">
                <tr class="kie-tablelist__row" data-field="root" data-i18n-prefix="WorkItemHandlerListItemView.">

                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="type">
                  </td>
                  <td class="kie-tablelist__cell ">
                    <input type="text" class="form-control" data-field="name">
                  </td>
                  <td class="kie-tablelist__cell  kie-tablelist__cell--actions">
                    <span data-field="remove-button" class="fa fa-times"></span>
                  </td>
                </tr>
                </tbody>
              </table>
              <div>
                <button type="button" class="btn btn-link" data-field="add-work-item-handler-button">
                  <span class="pficon pficon-add-circle-o"></span>
                  <span data-i18n-key="AddWorkItemHandler">Add Work Item Handler</span>
                </button>
              </div>
            </div>
          </div>
        </div>
<!-- end tiagos code -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Help Modal -->
<div class="modal fade" id="help">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">Help</h4>
      </div>
      <div class="modal-body">
        <div><img src="img/help.png" alt="" style="width: 568px;"/></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- About Modal -->
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content about-modal-pf">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
      </div>
      <div class="modal-body">
        <h1 id="aboutModalTitle">
          <img class="kie-brand-icon" src="images/jbpm_logo_noshadow_100px.png" alt="JBoss BPM Suite"/>
        </h1>
        <div class="product-versions-pf">
          <ul class="list-unstyled" id="aboutModalVersions">
            <li><strong>Version</strong> 0.0</li>
          </ul>
        </div>
        <div class="trademark-pf">
          jBPM is open source software, released under the <br>
          <strong>Apache Software License 2.0</strong>.
        </div>
      </div>
    </div>
  </div>
</div>

<!-- preferences modal -->
<div class="modal fade" id="preferences">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">Preferences</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="control-label">Language</label>
          <select class="form-control">
            <option value="default">English</option>
            <option value="de">German</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="ja">Japanese</option>
            <option value="pt_BR">Portuguese</option>
            <option value="zh_CN">Chinese (Simplified)</option>
          </select>
        </div>
        <div class="form-group">
          <label class="control-label">View Mode</label>
          <div class="radio">
            <label><input type="radio" name="optradio">Basic</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio">Compact</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio">Advanced</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label">Layouts</label>
          <p><a href="#">Reset Perspective Layouts</a></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<!-- Initialize Popovers -->
<script>
    $(document).ready(function() {
        $('[data-toggle=popover]').popovers()
    });
</script>

<!-- Compound expansion for list-view -->
<script>
    $(document).ready(function () {
        // Row Checkbox Selection
        $("input[type='checkbox']").change(function (e) {
            if ($(this).is(":checked")) {
                $(this).closest('.list-group-item').addClass("active");
            } else {
                $(this).closest('.list-group-item').removeClass("active");
            }
        });
        // toggle dropdown menu
        $(".list-view-pf-actions").on("show.bs.dropdown", function () {
            var $this = $(this);
            var $dropdown = $this.find(".dropdown");
            var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find(".dropdown-menu").outerHeight(true);
            $dropdown.toggleClass("dropup", space < 10);
        });
        // compound expansion
        $(".list-view-pf-expand").on("click", function () {
            var $this = $(this);
            var $heading = $(this).parents(".list-group-item");
            //var $row = $heading.parent();
            var $subPanels = $heading.find(".list-group-item-container");
            var index = $heading.find(".list-view-pf-expand").index(this);

            //Remove all active status
            $heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
                .end().removeClass("active")
                .end().removeClass("list-view-pf-expand-active");
            // Add active to the clicked item
            $(this).addClass("active")
                .parents(".list-group-item").addClass("list-view-pf-expand-active")
                .end().find(".fa-angle-right").addClass("fa-angle-down");
            // check if it needs to hide
            if($subPanels.eq(index).hasClass("hidden")){
                $heading.find(".list-group-item-container:visible").addClass("hidden");
                $subPanels.eq(index).removeClass("hidden");
            } else {
                $subPanels.eq(index).addClass("hidden");
                $heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
                    .end().removeClass("active")
                    .end().removeClass("list-view-pf-expand-active");
            }
        });

        // click close button to close the panel
        $(".list-group-item-container .close").on("click", function (){
            var $this = $(this);
            var $panel = $this.parent();

            // close the container and remove the active status
            $panel.addClass("hidden")
                .parent().removeClass("list-view-pf-expand-active")
                .find(".list-view-pf-expand.active").removeClass("active")
                .find(".fa-angle-right").removeClass("fa-angle-down")
        });
    });
</script>

</body>
</html>