<!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>  
    <link href='/static/fullcalendar/main.css' rel='stylesheet' />
    <script src='/static/fullcalendar/main.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="collection">

  <div class="row collection-item">
    <div>
      <img src="data:image/png;base64,{{.data.Logo}}"/>
    </div>
    <div id="resourceData">
      <span rtype="{{.data | getRtype}}" rid="{{.data.ID}}" class="title">{{.data.Name}}</span><br>
      <span class="small">{{.data.ID}} </span><br/>
      <span class="small">{{.data.ShortDescription}} </span><br/>
      <span class="small">[{{.data | getRtype}}]</span><br/>
    </div>

    <div class="col s1">
      <a id="addButton" disabled="true" onclick="submitWorkspace()" class="btn tooltipped gray" data-position="bottom" data-tooltip="Add to Workspace" ><i class="material-icons">shopping_cart</i></a>
    </div>
</div>

</div>
            
  <script type="text/javascript" src="/static/js/materialize.min.js"></script>

</body>

{{ template "swagger.tpl" . }} 

<script>
  elem = document.getElementById("resourceData").querySelector("*[rid]");
  var rid = elem.getAttribute("rid")
  var rtype = elem.getAttribute("rtype")

  window.onload = setInitialStatus;

  function setInitialStatus() {

    oc_catalog_api.then(client => {
          client.apis
                  .workspace
                  .WorkspaceController_Get_workspace()
                  .then(response => {
                    //console.log(response);
                    if ( response.body[rtype].includes(rid)) {
                      document.getElementById("addButton").setAttribute("disabled", true);
                    } else {
                      document.getElementById("addButton").removeAttribute("disabled");
                    }
                  })
                  .catch((error) => {
                      console.log("ERROR: " + error)
                  });
      });
  }

  //TODO: Make this function with callbacks in order to be used by any 
  function submitWorkspace() {
           
      oc_catalog_api.then(client => {
          client.apis
                  .workspace
                  .WorkspaceController_Add_model_to_workspace({id: rid, rtype: rtype})
                  .then(response => {
                    document.getElementById("addButton").setAttribute("disabled", true);
                  })
                  .catch((error) => {
                      console.log("ERROR: " + error)
                  });
      });
  }
</script>

</html>