{% load staticfiles %}
<div class="sg-wrapper" id="element-{{ element.id }}">
  {% if element.variations %}
  <label for="#iframe-{{ element.id }}-variation-toggler" class="iframe-variation-toggler--label">Variations:</label>
  <select class="iframe-variation-toggler" id="iframe-{{ element.id }}-variation-toggler" data-target="#iframe-{{ element.id }}">
    <option value="{% url "mote:element-iframe" project=element.project.id aspect=element.aspect.id pattern=element.pattern.id element=element.id %}" selected>
        {{ element.id }} base
    </option>
    {% for variation in element.variations %}
      <option value="{% url "mote:variation-iframe" project=element.project.id aspect=element.aspect.id pattern=element.pattern.id element=element.id variation=variation.id %}">
        {{ variation.title }}
      </option>
    {% endfor %}
  </select>
  {% endif %}
  <div class="clear"></div>
  <div class="iframe ui-widget-content">
  <div class="iframe-status">
    <b id="pixels">1000</b> px<br/>
    <b id="rems">48</b> em
  </div>
  <iframe class="lazyload" frameBorder="0" width="100%" height="100%" data-src="{% url "mote:element-iframe" project=element.project.id aspect=element.aspect.id pattern=element.pattern.id element=element.id %}"
          id="iframe-{{ element.id }}">
  </iframe>
  <div class="handle">
          <?xml version="1.0" encoding="iso-8859-1"?>
          <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
          <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
          <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          	  viewBox="0 0 408 408" style="enable-background:new 0 0 408 408;" xml:space="preserve">
          <g>
          	<g id="more-vert">
          		<path d="M204,102c28.05,0,51-22.95,51-51S232.05,0,204,0s-51,22.95-51,51S175.95,102,204,102z M204,153c-28.05,0-51,22.95-51,51
          			s22.95,51,51,51s51-22.95,51-51S232.05,153,204,153z M204,306c-28.05,0-51,22.95-51,51s22.95,51,51,51s51-22.95,51-51
          			S232.05,306,204,306z"/>
          	</g>
          </g>
          </svg>
      </div>
  </div>
  <div class="styleguide-pattern">
    <h3>Usage <a class="sg-hidden-area-toggler off" href="#element-{{ element.id }}-examples"><span class="off-text">Show</span><span class="on-text">Hide</span></a></h3>
    <div id="element-{{ element.id }}-examples" class="sg-hidden-area hide">
      {% block codeblock %}
      {% endblock %}
    </div> <!-- sg-hidden-area -->
    </div>
</div>
<!-- <script>
   getState('element-{{ element.id }}');
</script> -->
