<div class="editCustomDimension">
    <div piwik-content-block content-title="{{ 'CustomDimensions_ConfigureDimension'|translate:(dimensionScope|ucfirst):(editDimension.dimension.index || '') }}">

        <p ng-show="editDimension.model.isLoading || editDimension.model.isUpdating">
            <span class="loadingPiwik"><img src="plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
        </p>

        <div ng-show="!editDimension.model.isLoading">
            <form ng-submit="editDimension.edit ? editDimension.updateCustomDimension() : editDimension.createCustomDimension()">

                <div piwik-field uicontrol="text" name="name"
                     ng-model="editDimension.dimension.name"
                     title="{{ 'General_Name'|translate }}"
                     maxlength="255"
                     required="true"
                     inline-help="{{ 'CustomDimensions_NameAllowedCharacters'|translate }}">
                </div>

                <div piwik-field uicontrol="checkbox" name="active"
                     ng-model="editDimension.dimension.active"
                     title="{{ 'CorePluginsAdmin_Active'|translate }}"
                     inline-help="{{ 'CustomDimensions_CannotBeDeleted'|translate }}">
                </div>

                <div class="row form-group" ng-show="editDimension.doesScopeSupportExtraction()">

                    <h3 class="col s12">{{ 'CustomDimensions_ExtractValue'|translate }}</h3>

                    <div class="col s12 m6">

                        <div ng-repeat="(index, extraction) in editDimension.dimension.extractions" class="extraction {{ index }}">

                            <div class="row">

                                <div class="col s12 m6">
                                    <div piwik-field uicontrol="select" name="dimension{{index}}"
                                         ng-model="editDimension.dimension.extractions[index].dimension"
                                         full-width="true"
                                         options="editDimension.model.extractionDimensions">
                                    </div></div>
                                <div class="col s12 m6">
                                    <div piwik-field uicontrol="text" name="pattern{{index}}"
                                         full-width="true"
                                         ng-model="editDimension.dimension.extractions[index].pattern"
                                         title="{{ editDimension.dimension.extractions[index].dimension === 'urlparam' ? 'url query string parameter' : 'eg. /blog/(.*)/' }}"
                                    >
                                    </div>
                                </div>
                                <div class="col s12">
                                    <span ng-click="editDimension.addExtraction()"
                                          ng-show="editDimension.dimension.extractions[index].pattern"
                                          class="icon-plus"></span>
                                    <span ng-click="editDimension.removeExtraction(index)"
                                          ng-show="(editDimension.dimension.extractions|length) > 1"
                                          class="icon-minus"></span>
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col s12">
                                <div piwik-field uicontrol="checkbox" name="casesensitive"
                                     ng-show="editDimension.dimension.extractions[0].pattern"
                                     ng-model="editDimension.dimension.case_sensitive"
                                     title="{{ 'Goals_CaseSensitive'|translate }}">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col s12 m6 form-help">
                        {{ 'CustomDimensions_ExtractionsHelp'|translate }}
                    </div>
                </div>

                <input class="btn update" type="submit" ng-show="editDimension.edit" ng-disabled="editDimension.model.isUpdating" value="Update">
                <input class="btn create" type="submit" ng-show="editDimension.create"  ng-disabled="editDimension.model.isUpdating" value="Create">
                <a class="btn cancel" type="button" ng-href="#list">{{ 'General_Cancel'|translate }}</a>
            </form>

            <div class="alert alert-info howToTrackInfo" ng-show="editDimension.edit">
                <strong>{{ 'CustomDimensions_HowToTrackManuallyTitle'|translate }}</strong>
                <p>
                {{ 'CustomDimensions_HowToTrackManuallyViaJs'|translate }}
                </p>
                <pre piwik-select-on-focus><code>_paq.push(['setCustomDimension', {{ editDimension.dimension.idcustomdimension }}, '{{ 'CustomDimensions_ExampleValue'|translate }}']);</code></pre>
                <p ng-bind-html="'CustomDimensions_HowToTrackManuallyViaJsDetails'|translate:'&lt;a target=_blank href=\'https://developer.piwik.org/guides/tracking-javascript-guide#custom-dimensions\'>':'&lt;/a>'">
                </p>
                <p>
                {{ 'CustomDimensions_HowToTrackManuallyViaPhp'|translate }}
                </p>
                <pre piwik-select-on-focus><code>$tracker->setCustomDimension('{{ editDimension.dimension.idcustomdimension }}', '{{ 'CustomDimensions_ExampleValue'|translate }}');</code></pre>
                <p>
                {{ 'CustomDimensions_HowToTrackManuallyViaHttp'|translate }}
                </p>
                 <pre piwik-select-on-focus><code>&dimension{{ editDimension.dimension.idcustomdimension }}={{ 'CustomDimensions_ExampleValue'|translate }}</code></pre>
            </div>
        </div>

    </div>
</div>