palette/views/jst/feature_flags/featureFlag.handlebars

<div class="row-fluid feature {{id}}">
  <div class="span7">
    <span
       class="element_toggler"
       aria-controls="{{id}}-details"
       aria-expanded="{{#if isExpanded}}true{{else}}false{{/if}}"
       role="button"
       tabindex="0">
       <span class="screenreader-only">
         {{#t "toggle_feature_details_screenreader_info"}}Toggle feature details for {{title}} {{/t}}
       </span>
       <i class="icon-mini-arrow-{{#if isExpanded}}down{{else}}right{{/if}}"></i>
    </span>
    <span class="feature-title">{{title}}</span>

    {{#each labels}}
      <span class="label label-{{cssClass}}">{{name}}</span>
    {{/each}}
  </div>

  <div class="span5 text-right">
    {{#if threeState}}
      <div id="ff_{{id}}" class="ui-buttonset ui-buttonset--feature-settings">
        <div class="ff-background ff-left {{#if disableOff}}ff-disabled{{/if}}">
          <input type="radio" id="ff_off_{{id}}" name="ff_{{id}}" class="ff_button" {{#if isOff}}checked{{/if}}
            {{#if disableOff}}disabled{{/if}} data-id="{{id}}" data-action="off">
          <label for="ff_off_{{id}}" role="button" aria-label="Turn off {{title}}" aria-disabled="{{disableOff}}">
              {{#t "off"}}Off{{/t}}
          </label>
        </div>
        <div class="ff-background {{#if disableAllow}}ff-disabled{{/if}} {{#if isSiteAdmin}}ff-right{{/if}}">
          <input type="radio" id="ff_allowed_{{id}}" name="ff_{{id}}" class="ff_button" {{#if isAllowed}}checked{{/if}}
            {{#if disableAllow}}disabled{{/if}} data-id="{{id}}" data-action="allowed">
          <label for="ff_allowed_{{id}}" role="button" aria-label="Allow {{title}}" aria-disabled="{{disableAllow}}">
            {{#t "allow"}}Allow{{/t}}
          </label>
        </div>
        {{#unless isSiteAdmin}}
          <div class="ff-background ff-right {{#if disableOn}}ff-disabled{{/if}}">
            <input type="radio" id="ff_on_{{id}}" name="ff_{{id}}" class="ff_button" {{#if isOn}}checked{{/if}}
              {{#if disableOn}}disabled{{/if}} data-id="{{id}}" data-action="on">
            <label for="ff_on_{{id}}" role="button" aria-label="Turn on {{title}}" aria-disabled="{{disableOn}}">
              {{#t "on"}}On{{/t}}
            </label>
           </div>
        {{/unless}}
      </div>
    {{else}}
      <!-- start super toggle -->
      <label class="ic-Super-toggle--on-off" for="ff_toggle_{{id}}">
        <span class="screenreader-only">
          {{#if disableToggle}}
            {{#if isOn}}
              {{#t}}{{title}} is on{{/t}}
            {{else}}
              {{#t}}{{title}} is off{{/t}}
            {{/if}}
          {{else}}
            {{#t}}Enable feature: {{title}}{{/t}}
          {{/if}}
        </span>
        <input id="ff_toggle_{{id}}" class="ic-Super-toggle__input ff_toggle" type="checkbox"
               {{#if isOn}}checked{{/if}} {{#if disableToggle}}disabled{{/if}} data-id="{{id}}">
        <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="{{#t "on"}}On{{/t}}" data-unchecked="{{#t "off"}}Off{{/t}}">
          <div class="ic-Super-toggle__switch">
            <div class="ic-Super-toggle__option--LEFT">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9"
                   viewBox="0 0 548.9 548.9" xml:space="preserve">
                <polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5" />
              </svg>
            </div>
            <div class="ic-Super-toggle__option--RIGHT">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve">
                <polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28" />
              </svg>
            </div>
          </div>
        </div>
      </label>
      <!-- end super toggle -->
    {{/if}}
  </div>
</div>

<div class="feature-details row-fluid" id="{{id}}-details" style="display: {{#if isExpanded}}block{{else}}none{{/if}}">
  <div class="span10">
    <p tabindex="0" class="feature-description">
      {{#if releaseOn}}
        {{#t "estimated_release"}}Estimated Release:{{/t}}
        <span class="feature-release-date">
          {{tDateToString (fudge releaseOn) "medium"}}
        </span>
        </br>
      {{/if}}
      {{#if description}}
        {{{description}}}
      {{else}}
        ({{#t "no_description"}}no description{{/t}})
      {{/if}}
    </p>
  </div>

  <div class="span2 text-right feature-detail-links">
    {{#if releaseNotesUrl}}
    <a href="{{releaseNotesUrl}}" class="feature-release-notes-link">
        {{#t "release_notes"}}release notes{{/t}}
      </a>
    {{/if}}
  </div>
</div>