xNightR00T File Manager

<page-header ng-if="!newAppOrRule" title="{{getTitle(data.ruleContainer)}}" 
             description="{{pageDescription}}" read-more-link="{{helpLinkService.get('importexport')}}"></page-header>
<page-header ng-if="newAppOrRule" title="New rule" 
             description="{{pageDescription}}" read-more-link="{{helpLinkService.get('importexport')}}"></page-header>

<form name="myForm" ng-submit="saveClick()">
    <input type="submit" class="hidden">
    <div class="general-cache-details-top">
        <h2>General Details</h2>

        <table style="width: 400px; margin: 20px 0;">
            <tbody>
                <tr>
                    <td>Application</td>
                    <td>
                       <!-- <div ng-if="data.ruleContainer || stateParams.appId">
                            <span id="application-name" class="hidden">{{hiddenAppId}}</span>
                            <span id="application-show-name">{{appName}}</span>
                        </div>
                       -->
                        <div >
                            <select ng-change="changeUrlParams(formData.applicationId)" id="application-name" ng-model="formData.applicationId">
                                <option value="-1" title="Global">Global</option>
                                <option ng-repeat="application in data.applications" value="{{application.id}}">{{application.userAppName}}</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr style="height: 28px;">
                    <td>Rule Name</td>
                    <td>
                        <input type="text" name="name" id="rule-name" ng-model="formData.name" placeholder="e.g. MyRule"  />
                    </td>
                </tr>
                <tr style="height: 28px;">
                    <td>Cache Duration</td>
                    <td><input type="text" id="duration" ng-model="formData.lifetime"  />
                        <span>seconds</span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="tabsWrapper">
        <ul class="tabs">                              
            <li class="tab" ng-class="{active: currentTab === 'cache-condition'}" ng-click="currentTab = 'cache-condition'">Cache Conditions</li>
            <li class="tab" ng-class="{active: currentTab === 'multiple-versions'}" ng-click="currentTab = 'multiple-versions'">Multiple Versions</li>
        </ul>
        <div class="content" ng-if="currentTab === 'cache-condition'">

            <div class="cache-conditions" id="conditions_container">
                <table class="conditions_container">
                    <tr>
                        <td>
                            Define a Web page to cache by building the URL in the entry fields. Use the URL of the page you want to cache.<br>
                            You can also add conditions that can further pinpoint what to cache.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="condition-count">1</span>
                            <span>Cache if URL</span>
                            <select id="match_type" ng-model="formData.matchType">
                                <option ng-repeat="(key, value) in data.dictionaryMatchType" value="{{key}}">{{value}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="condition-panel">
                                <table class="conditionsUrl">
                                    <tr>
                                        <td class="static-url-td">
                                            <input type="hidden" name="urlSchema" value="https?">
                                            <span>http(s)://<span ng-if="!editGlobalRule">{{formData.urlHost}}<span ng-if="formData.urlPath.charAt(0) != '/'">/</span>{{formData.urlPath}}</span></span>

                                            <input ng-if="editGlobalRule" type="text" id="urlHost" ng-model="formData.urlHost" />
                                        </td>
                                        
                                         <td class="static-url-td" ng-if="editGlobalRule"><input type="text" id="urlPath" ng-model="formData.urlPath" /></td>
                                         <td class="static-url-td" ng-if="!editGlobalRule"><input type="text" id="extraUrlPath" ng-model="formData.extraPathValue" /></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="condition-count">2</span>
                            <span>Cache if</span>
                            <select id="conditions_type" ng-model="formData.conditionsType">
                                <option ng-repeat="(key, value) in {'or': 'at least one', 'and': 'all'}" value="{{key}}">{{value}}</option> 
                            </select>
                            <span>of the following queries are true</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="condition-panel">
                                <table class="conditionsTable" id="conditionsTable">
                                    <tr ng-if="formData.conditions.length === 0"><td><span id="no_conditions">No further conditions on query string</span></td></tr>
                                    <tr ng-repeat="(key, condition) in formData.conditions">
                                        <td>
                                            <select class="globalName" ng-model="condition.global">
                                                <option ng-repeat="method in data.dictionaryGlobalTypeJson" value="{{method}}">{{method}}</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="globalKey" ng-model="condition.element"></td>
                                        <td>
                                            <select class="globalMatch" ng-model="condition.type" ng-change="onConditionMatchChange(condition)">
                                                <option ng-repeat="(key, value) in data.dictionaryGlobalMatchTypeJson" value="{{key}}">{{value}}</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="globalValue" ng-model="condition.value" ng-disabled="['exists', 'not_exists'].indexOf(condition.type) > -1"></td>
                                        <td class="valign-middle"><a class="btn btn-gray" title="Remove cache condition" ng-click="removeCondition(key)"><i class="fa fa-times"></i></a></td>
                                    </tr>
                                    <tr id="add-condition">
                                        <td><a class="btn btn-gray" ng-click="addNewCacheCondition();" title="Add a new caching condition">Add Condition</a></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>

                </table>
            </div>

        </div>
        <div class="content" ng-if="currentTab === 'multiple-versions'">
            <div id="split_container">
                <table class="split-container">
                    <tr>
                        <td colspan="2">If you want to manage a different cache version according to an additional parameter,
                            you can choose to create a separate cached page for all the caching conditions (Entire Query String, Request URI), or add each separate query string (Get, Server, Session or Cookie) one at a time.</td>
                    </tr>
                    <tr>
                        <td><input type="radio" id="split-cache-single" name="split-cache" value="0" ng-model="formData.splitCache" /></td>
                        <td><label for="split-cache-single">Create a single cached page</label></td>
                    </tr>
                    <tr>
                        <td><input type="radio" id="split-cache-multi" name="split-cache" value="1" ng-model="formData.splitCache" /></td>
                        <td><label for="split-cache-multi">Create a separate cached page for each value of the following queries</label></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="split-condition-panel">
                                <table class="splitTable" id="split_table">
                                    <tr ng-if="formData.splitBy.length === 0"><td><span id="no_cache_quiries">No further queries</span></td></tr>
                                    <tr ng-repeat="(key, split) in formData.splitBy">
                                        <td>
                                            <select class="globalSplitName" ng-model="split.global" ng-change="onGlobalSplitChange(split)">
                                                <option ng-repeat="(key, value) in dictionarySplitGlobalTypeJsonEdited" value="{{key}}">{{value}}</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="globalSplitKey" ng-model="split.element" ng-disabled="['uri', 'entire'].indexOf(split.global) > -1"></td>
                                        <td class="valign-middle"><a class="btn btn-gray" title="Remove split condition" ng-click="removeSplitCondition(key)"><i class="fa fa-times"></i></a></td>
                                    </tr>
                                    <tr id="add-split-condition">
                                        <td><a class="btn btn-gray" ng-click="addNewSplitCondition();" title="Add new split">Add Split Condition</a></td>
                                    </tr>
                                    <tr>
                                        <td><div id="content-lock" ng-if="formData.splitCache == 0"></div></td>
                                    </tr>
                                </table>
                            </div>
                            </div>

                        </td>
                    </tr>
                </table>

            </div>
        </div>
</form>
<div id="page-cahce-edit-action-bar" class="grid-action-bar">
    <fieldset class="reset-fieldset" ng-disabled="isSaving">
        <a class="btn btn-blue" ng-disabled="!isAllowedSaveRule || myForm.$pristine" ng-click="saveClick()">
            <span ng-show="!isSaving">Save</span>
            <span ng-show="isSaving"><i class="fa fa-spinner fa-spin"></i> Saving...</span>
        </a>
        <a class="btn btn-default" id="close_rule" title="Close" href="#!/caching/page-cache-list">Close</a>
        <span ng-if="stateParams.id != -1">
            <a class="btn btn-default" id="dublicate_rule" title="Duplicate Rule" ng-disabled="!isAllowedSaveRule || isDuplicate || newAppOrRule" ng-click="duplicate()">Duplicate Rule</a>
            <a class="btn btn-default" id="clear_cache" title="Clear Cache" ng-click="clearCache()" ng-disabled="!aclService.isAllowed('route:PageCacheWebApi', 'pagecacheClearCacheByRuleName')">Clear Cache</a>
        </span>
    </fieldset>
</div>