questlab/www/analytics/plugins/SegmentEditor/templates/_segmentSelector.twig

<div class="SegmentEditor" style="display:none;">
    <div class="segmentationContainer listHtml">
        <span class="segmentationTitle"></span>
        <div class="dropdown-body">
            <ul class="submenu">
                <li>{{ 'SegmentEditor_SelectSegmentOfVisitors'|translate }}
                    <div class="segmentList">
                        <ul>
                        </ul>
                    </div>
                </li>
            </ul>

            {% if authorizedToCreateSegments %}
                <a class="add_new_segment">{{ 'SegmentEditor_AddNewSegment'|translate }}</a>
            {% else %}
                <ul class="submenu">
                <li> <span class='youMustBeLoggedIn'>{{ 'SegmentEditor_YouMustBeLoggedInToCreateSegments'|translate }}
                    <br/>&rsaquo; <a href='index.php?module={{ loginModule }}'>{{ 'Login_LogIn'|translate }}</a> </span>
                </li>
                </ul>
            {% endif %}
        </div>
    </div>

    <div class="initial-state-rows">{# no space here important for jquery #}<div class="segment-add-row initial"><div>
        <span>+ {{ 'SegmentEditor_DragDropCondition'|translate|raw }}</span>
    </div></div>
    <div class="segment-and">{{ 'SegmentEditor_OperatorAND'|translate|raw }}</div>
    <div class="segment-add-row initial"><div>
        <span>+ {{ 'SegmentEditor_DragDropCondition'|translate|raw }}</span>
    </div></div>
    </div>

    <div class="segment-row-inputs">
        <div class="segment-input metricListBlock">
            <select title="{{ 'SegmentEditor_ChooseASegment'|translate }}" class="metricList">
                {% for category,segmentsInCategory in segmentsByCategory %}
                <optgroup label="{{ category }}">
                    {% for segmentInCategory in segmentsInCategory %}
                        <option data-type="{{ segmentInCategory.type }}" value="{{ segmentInCategory.segment }}">{{ segmentInCategory.name }}</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
        </div>
        <div class="segment-input metricMatchBlock">
            <select title="{{ 'General_Matches'|translate }}">
                <option value="==">{{ 'General_OperationEquals'|translate }}</option>
                <option value="!=">{{ 'General_OperationNotEquals'|translate }}</option>
                <option value="<=">{{ 'General_OperationAtMost'|translate }}</option>
                <option value=">=">{{ 'General_OperationAtLeast'|translate }}</option>
                <option value="<">{{ 'General_OperationLessThan'|translate }}</option>
                <option value=">">{{ 'General_OperationGreaterThan'|translate }}</option>
                <option value="=@">{{ 'General_OperationContains'|translate }}</option>
                <option value="!@">{{ 'General_OperationDoesNotContain'|translate }}</option>
            </select>
        </div>
        <div class="segment-input metricValueBlock">
            <input type="text" title="{{ 'General_Value'|translate }}">
        </div>
        <div class="clear"></div>
    </div>
    <div class="segment-rows">
        <div class="segment-row">
            <a href="#" class="segment-close"></a>
            <a href="#" class="segment-loading"></a>
        </div>
    </div>
    <div class="segment-or">{{ 'SegmentEditor_OperatorOR'|translate }}</div>
    <div class="segment-add-or"><div>
            {% set orCondition %}<span>{{ 'SegmentEditor_OperatorOR'|translate }}</span>{% endset %}
            <a href="#"> + {{ 'SegmentEditor_AddANDorORCondition'|translate(orCondition)|raw }} </a>
        </div>
    </div>
    <div class="segment-and">{{ 'SegmentEditor_OperatorAND'|translate }}</div>
    <div class="segment-add-row"><div>
            {% set andCondition %}<span>{{ 'SegmentEditor_OperatorAND'|translate }}</span>{% endset %}
            <a href="#">+ {{ 'SegmentEditor_AddANDorORCondition'|translate(andCondition)|raw }}</a>
        </div>
    </div>
    <div class="segment-element">
        <div class="segment-nav">
            <h4 class="visits"><span class="available_segments"><strong>
                <select class="available_segments_select"></select>
            </strong></span></h4>
            <div class="scrollable">
            <ul>
                {% for category,segmentsInCategory in segmentsByCategory %}
                <li data="visit">
                    <a class="metric_category" href="#">{{ category }}</a>
                    <ul style="display:none;">
                        {% for segmentInCategory in segmentsInCategory %}
                            <li data-metric="{{ segmentInCategory.segment }}"><a class="ddmetric" href="#">{{ segmentInCategory.name }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                {% endfor %}
            </ul>
            </div>
            <div class="custom_select_search">
                <a href="#"></a>
                <input type="text" aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="inp ui-autocomplete-input segmentSearch" value="{{ 'General_Search'|translate }}" length="15">
            </div>
        </div>
        <div class="segment-content">
            <div class="segment-top" {% if not isSuperUser %}style="display:none"{% endif %}>
                {{ 'SegmentEditor_ThisSegmentIsVisibleTo'|translate }} <span class="enable_all_users"><strong>
                        <select class="enable_all_users_select">
                            <option selected="1" value="0">{{ 'SegmentEditor_VisibleToMe'|translate }}</option>
                            <option value="1">{{ 'SegmentEditor_VisibleToAllUsers'|translate }}</option>
                        </select>
                    </strong></span>

                {{ 'SegmentEditor_SegmentIsDisplayedForWebsite'|translate }}<span class="visible_to_website"><strong>
                        <select class="visible_to_website_select">
                            <option selected="" value="{{ idSite }}">{{ 'SegmentEditor_SegmentDisplayedThisWebsiteOnly'|translate }}</option>
                            <option value="0">{{ 'SegmentEditor_SegmentDisplayedAllWebsites'|translate }}</option>
                        </select>
                    </strong></span>
                {{ 'General_And'|translate }} <span class="auto_archive"><strong>
                        <select class="auto_archive_select">
                            {% if createRealTimeSegmentsIsEnabled %}
                            <option selected="1" value="0">{{ 'SegmentEditor_AutoArchiveRealTime'|translate }} {{ 'General_DefaultAppended'|translate }}</option>
                            {% endif %}
                            <option {% if not createRealTimeSegmentsIsEnabled %}selected="1"{% endif %} value="1">{{ 'SegmentEditor_AutoArchivePreProcessed'|translate }} </option>
                        </select>
                    </strong></span>

            </div>
            <h3>{{ 'General_Name'|translate }}: <span  class="segmentName"></span> <a class="editSegmentName" href="#">{{ 'General_Edit'|translate|lower }}</a></h3>
        </div>
        <div class="segment-footer">
            <div piwik-rate-feature title="Segment Editor" style="display:inline-block;float: left;margin-top: 2px;margin-right: 10px;"></div>
            <span class="segmentFooterNote">The Segment Editor was <a class='crowdfundingLink' href='http://crowdfunding.piwik.org/custom-segments-editor/' target='_blank'>crowdfunded</a> with the awesome support of 80 companies and Piwik users worldwide!</span>
            <a class="delete" href="#">{{ 'General_Delete'|translate }}</a>
            <a class="close" href="#">{{ 'General_Close'|translate }}</a>
            <button class="saveAndApply">{{ 'SegmentEditor_SaveAndApply'|translate }}</button>
        </div>
    </div>
</div>
<div class="segmentListContainer">
<div class="ui-confirm segment-delete-confirm">
    <h2>{{ 'SegmentEditor_AreYouSureDeleteSegment'|translate }}</h2>
    <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
    <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
</div>
<div class="ui-confirm pleaseChangeBrowserAchivingDisabledSetting">
    <h2>{{ 'SegmentEditor_SegmentNotApplied'|translate(nameOfCurrentSegment)|raw }}</h2>
    {% set segmentSetting %}{{ 'SegmentEditor_AutoArchivePreProcessed'|translate }}{% endset %}
    <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
    <p class="description">
        {{ 'SegmentEditor_SegmentNotAppliedMessage'|translate(nameOfCurrentSegment)|raw }}
        <br/>
        {{ 'SegmentEditor_DataAvailableAtLaterDate'|translate }}
        {% if isSuperUser %}
            <br/> <br/> {{ 'SegmentEditor_YouMayChangeSetting'|translate('browser_archiving_disabled_enforce', segmentSetting) }}
        {% endif %}
    </p>
</div>
</div>