{% for pair in resource.spec %}
  {% assign name = pair[0] %}
  {% assign spec = pair[1] %}
  {% assign type = spec.type %}

  <div class="property {{type}} {% if spec.hidden %}hidden{% endif %}"
       data-name="{{name}}">
    <label for="{{name}}">{{name | capitalize}}</label>

    {% if type == 'string' %}
      <input
        name="{{name}}" type="text" value="{{spec.value}}">
    {% elsif type == 'text' %}
      <textarea
        name="{{name}}">{{spec.value}}</textarea>
    {% elsif type == 'number' %}
      <input
        type="number"
        name="{{name}}" value="{{spec.value}}">
    {% elsif type == 'enum' %}
      <select
        name="{{name}}">
        {% for option in spec.options %}
          <option value="{{option}}" {% if option == spec.value %}selected{% endif %}>{{option | capitalize}}</option>
        {% endfor %}
      </select>
    {% elsif type == 'video' %}
      <div class="video group {% if spec.value.url %}loaded{% endif %}">
        <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL">
        <input name="{{name}}[type]" type="hidden" value="{{spec.value.type}}" class="video-type" hidden>
        <input name="{{name}}[token]" type="hidden" value="{{spec.value.token}}" class="video-token" hidden>
        <label>Title</label>
        <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title">
        <label>Thumbnail</label>
        <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb">
      </div>
    {% elsif type == 'image' %}
      <div class="image group {% if spec.value.uri %}loaded{% endif %}">
        <div class="fields">
          <div class="add-image-button">
            <input type="file" accept="image/*">
            <button>+ Add image</button>
          </div>
          <input class="add-url" type="text" placeholder="+ Add URL">
        </div>
        <div class="image-element">
          <input class="uri" type="hidden" name="{{name}}[uri]" value="{{spec.value.uri}}">
          <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption}}</textarea>
          <img src="{{spec.value.uri}}" alt="{{spec.value.caption}}">
          <button class="remove">x</button>
        </div>
      </div>

    {% elsif type == 'date' %}

      <div class="date">
        <input name="{{name}}"
               type="date"
               {% if spec.value %}
                 value="{{spec.value | date: '%Y-%m-%d'}}"
               {% endif %}
               >
      </div>

    {% elsif type == 'flag' %}

      <div class="flag">
        <input name="{{name}}"
               type="checkbox"
               {% if spec.value == 'true' %}
                checked="true"
               {% endif %}
               value="true">
      </div>

    {% elsif type == 'tag-list' %}
      <div class="tag-list">
        <input name="{{name}}"
               value="{{spec.value}}"
               placeholder="Enter a comma separated list of tags.">
      </div>
    {% elsif type == 'link-list' %}

      <div class="link-list group">
        <div class="links">
          {% for url in spec.value %}
            <input
                name="{{name}}[{{forloop.index0}}]"
                value="{{url}}"
                type="text"
                class="link-input">
            <button class="remove-link-btn"
                    data-for="{{name}}[{{forloop.index0}}]">
              -
            </button>
          {% endfor %}
        </div>
        <input type="text"
               class="link-input-new"
               placeholder="http://www.example.com">
        <button class="add-link-btn">+</button>
      </div>

    {% elsif type == 'media-list' %}
      <div class="media-list group loaded">
        <div class="fields">
          <div class="add-image-button">
            <input type="file" accept="image/*" multiple>
            <button>+ Add images</button>
          </div>
          <input class="add-url" type="text" placeholder="+ Add Image/Video URL">
        </div>

        <script type="text/html" class="image-template">
          <li class="image-element">
            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
            <textarea class="caption" name="{{name}}[][caption]"></textarea>
            <img>
            <button class="remove">x</button>
          </li>
        </script>

        <script type="text/html" class="video-template">
          <li class="video-element">
            <div style="float: left">
            <input name="{{name}}[][type]" type="hidden" class="video-type" hidden>
            <input name="{{name}}[][token]" type="hidden" class="video-token" hidden>
            <label>Caption</label>
            <input name="{{name}}[][title]" type="text" class="video-title">
            <label>Thumbnail</label>
            <input name="{{name}}[][thumb]" type="text" class="video-thumb">
            </div>
            <img>
            <button class="remove">x</button>
          </li>
        </script>

        <ol>
          {% for image in spec.value %}
            {% if image.token %}
              <li class="video-element">
                <div style="float: left">
                <input name="{{name}}[][type]" value="{{image.type}}" type="hidden" class="video-type" hidden>
                <input name="{{name}}[][token]" value="{{image.token}}" type="hidden" class="video-token" hidden>
                <label>Caption</label>
                <input name="{{name}}[][title]" value="{{image.title}}" type="text" class="video-title">
                <label>Thumbnail</label>
                <input name="{{name}}[][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
                </div>
                <img src="{{image.thumb}}">
                <button class="remove">x</button>
              </li>
            {% else %}
              <li class="image-element">
                <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
                <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
                <img src="{{image.uri}}" alt="{{image.caption}}">
                <button class="remove">x</button>
              </li>
            {% endif %}
          {% endfor %}
        </ol>
      </div>
    {% elsif type == 'captioned-image-list' %}
      <div class="image-list group loaded">
        <div class="fields">
          <div class="add-image-button">
            <input type="file" accept="image/*" multiple>
            <button>+ Add images</button>
          </div>
          <input class="add-url" type="text" placeholder="+ Add URL">
        </div>

        <script type="text/html" class="image-template">
          <li class="image-element">
            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
            <textarea class="caption" name="{{name}}[][caption]"></textarea>
            <img alt="{{image.caption}}">
            <button class="remove">x</button>
          </li>
        </script>

        <ol>
          {% for image in spec.value %}
            <li class="image-element">
              <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
              <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
              <img src="{{image.uri}}" alt="{{image.caption}}">
              <button class="remove">x</button>
            </li>
          {% endfor %}
        </ol>
      </div>
    {% elsif type == 'double-captioned-image-list' %}
      <div class="image-list group loaded">
        <div class="fields">
          <div class="add-image-button">
            <input type="file" accept="image/*" multiple>
            <button>+ Add images</button>
          </div>
          <input class="add-url" type="text" placeholder="+ Add URL">
        </div>

        <script type="text/html" class="image-template">
          <li class="image-element">
            <img alt="{{image.caption}}">
            <button class="remove">x</button>
            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
            <input class="caption" name="{{name}}[][label]" placeholder="Name">
            <input class="caption" name="{{name}}[][caption]" placeholder="Email">
          </li>
        </script>

        <ol>
          {% for image in spec.value %}
            <li class="image-element">
              <img src="{{image.uri}}" alt="{{image.caption}}">
              <button class="remove">x</button>
              <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label}}" placeholder="Name">
              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption}}"  placeholder="Email">
            </li>
          {% endfor %}
        </ol>
      </div>
    {% elsif type == 'meta' %}
      <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}">
    {% else %}
      <p><pre style="color: red">Admin template doesn't support '{{type}}' properties!</pre></p>
    {% endif %}
  </div>

{% endfor %}