% rebase('base.tpl')

<script src="/static/vendor/vue/vue.js"></script>
<script src="/static/vendor/vue-3d-model/vue-3d-model.umd.js"></script>

<h3>
  <i class="fa fa-folder-o" aria-hidden="true"></i>
  <a href="/list/{{ current_dir.rstrip('/') }}">objects{{current_dir}}</a>
</h3>
<h4>
  <span style="text-transform: uppercase">
    {{ object['type'] }}:
  </span>
  {{name}}
</h4>

<div class="model-wrap">
  <div id="object">
    %if object['type'] == "gltf":
      <model-gltf
          src="{{ object['urls'][0] }}"
          @on-mousemove="onMouseMove"
          >
      </model-gltf>
  	%end
    %if object['type'] == "obj-mtl":
      <model-obj
          src="{{ object['urls'][0] }}"
          mtl="{{ object['urls'][1] }}"
          >
      </model-obj>
  	%end
    %if object['type'] == "obj":
      <model-obj
          src="{{ object['urls'][0] }}"
          >
      </model-obj>
  	%end
    %if object['type'] == "fbx":
      <model-fbx
          src="{{ object['urls'][0] }}"
          >
      </model-fbx>
  	%end
    %if object['type'] == "stl":
      <model-stl
          src="{{ object['urls'][0] }}"
          >
      </model-stl>
  	%end
  </div>
</div>

<script>
  new Vue({
    el: "#object"
  })
</script>