<!DOCTYPE html>

<html>

<head>
  <title>o-search</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--Import Google Icon Font-->
  <link type="text/css" rel="stylesheet" href="/static/css/material-icons.css">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection" />
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    .small { 
      font-size: x-small;
    }

    </style>
    <script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
      $('.tooltipped').tooltip();
      $('.fixed-action-btn').floatingActionButton({direction: 'bottom'});
    ;(function() {
    jQuery.expr[':'].containsNC =  function(elem, index, match) {
        return (elem.textContent || elem.innerText || jQuery(elem).text() || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0;
    }
    }(jQuery));

      $('#filter').on('input',function(e)
      {          
          if ($('#filter').val())
          {
            $('a')
              .find('span').not(':containsNC('+$('#filter').val()+')')
              .parent()
              //.css('outline', '3px solid red');
              .hide();
            $('a')
              .find('span:containsNC('+$('#filter').val()+')')
              .parent()
              //.css('outline', '3px solid red');
              .show();
          }

      });
    });
    </script>
</head>

<body>

  {{ template "floating_menu.tpl" . }}    
    
    <div class="row">
      <div class="col s4">
        <a href="/"><img src="/static/img/O-cloud.svg" width="40%" height="auto"/></a>
      </div>
    </div> 
        <div class="col s12">
    <h4>Workspace</h4>
    </div>
    <div class="collection">
        {{range $key, $value := .list}}
        <div class="row collection-item">
          <a href="/details/{{$value | getRtype}}/{{$value | getID}}">
          <div class="col s1">
            <img src="data:image/png;base64,{{$value | getLogo}}" style="width: 50%; height: 50%"/>
          </div>
          <div class="col s10">
            <span rtype="{{$value | getRtype}}" rid="{{$value | getID}}" class="title">{{$value | getName}}</span><br>
            <span class="small">{{$value | getShortDescription}} </span>
            <span class="small">[{{$value | getType}}]</span>
          </div>
        </a>
          <div class="col s1">
            <a id="removeButton" onclick="removeWorkspace()" class="btn tooltipped red" data-position="bottom" data-tooltip="Remove from Workspace" ><i class="material-icons">delete</i></a>
          </div>
      </div>
        {{end}}
    </div>
            
  <script type="text/javascript" src="/static/js/materialize.min.js"></script>

</body>


{{ template "swagger.tpl" . }} 

<script>
  function removeWorkspace() {
    var item = event.srcElement.closest(".collection-item")
    var elem = item.querySelector("*[rid]")
    var rid = elem.getAttribute("rid")
    var rtype = elem.getAttribute("rtype")
    //console.log(elem)

           
      oc_catalog_api.then(client => {
          client.apis
                  .workspace
                  .WorkspaceController_Delete_element_from_user_workspace({id: rid, rtype: rtype})
                  .then(response => {
                    item.remove()
                  })
                  .catch((error) => {
                      console.log("ERROR: " + error)
                  });
      });
  }
</script>

</html>