<%#
  # @file
  # templates for the upper right autocomplete results
  #%>

<div class="templates">
    
    <script type="text/template" id="mapInfoBoxTemplate">
  <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
  
  <div class="mapInfoStat">
    <div class="infoStatIcon mapContributors hoverForTip">
      <img id="mapContribs" class="{{contributors_class}}"
        width="25" height="25" src="{{contributor_image}}" />
      <span>{{contributor_count}}</span>
      <div class="tip">{{contributor_list}}</div>
    </div>
    <div class="infoStatIcon mapTopics">
      {{topic_count}}
    </div>
    <div class="infoStatIcon mapSynapses">
      {{synapse_count}}
    </div>
    <div class="infoStatIcon mapPermission {{permission}} hoverForTip">
      {{{map_creator_tip}}}
    </div>
    <div class="clearfloat"></div>
  </div>
  <div class="mapInfoDesc" id="mapInfoDesc">
    {{{desc}}}
  </div>
  
  <div class="mapInfoMeta">
    <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
    <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
    <div class="mapInfoButtonsWrapper">
      <div class="mapInfoDelete">
        <span>Delete</span>
      </div>
      <div class="mapInfoShare">
        <div class="mapInfoShareIcon"></div>
        <span>Share</span>
      </div>
    </div>
  </div>
    </script>
    
    <script type="text/template" id="mapCardTemplate">
  <a href="/maps/{{id}}">
  <div class="permission {{editPermission}}"> <!-- must be canEdit or cannotEdit -->
	  <div class="mapCard">                                                   
      <span class="title">                                                  
        {{name}}
      </span>  
      <div class="mapScreenshot">
        {{{screenshot}}}
      </div>                                                  
      <div class="scroll">                                                    
        <div class="desc">                                                    
          {{desc}}
          <div class="clearfloat"></div>                              
        </div>                                                                
      </div>
      <div class="mapMetadata">
         <div class="metadataSection">{{{contributor_count_number}}}{{contributor_count_string}}</div>
         <div class="metadataSection">{{{topic_count_number}}}{{topic_count_string}}</div>         
         <div class="metadataSection mapPermission">{{permission}}</div> 
         <div class="metadataSection">{{{synapse_count_number}}}{{synapse_count_string}}</div>         
         <div class="clearfloat"></div>                               
      </div>                                         
    </div>
  </div>
  </a>
    </script>
        
    <script type="text/template" id="topicSearchTemplate">
    <div class="result{{rtype}}">
      <div class="topicMetacode">
        <img src="{{typeImageURL}}" class="topicIcon" />
        <span class="metacodeTip">{{type}}</span>
      </div>
      <div class="resultText">
        <p class="resultTitle">{{label}}</p>
        <p class="resultDesc">{{description}}</p>
      </div>
      <div class="autoOptions">
        <button class="addToMap hoverForTip" onclick="return Metamaps.Topic.getTopicFromSearch(event, {{id}})">
          <span class="tip">add to map</span>
        </button>
        <div class="mapCount">
          {{mapCount}}
        </div>
        <div class="synapseCount">
          {{synapseCount}}
        </div>
        <div class="topicOriginatorIcon hoverForTip">
            <img width="18" height="18" src="{{originatorImage}}">
            <span class="tip topicOriginator">created by {{originator}}</span>
        </div>
        <div class="topicPermission {{permission}}">
        </div>
      </div>
      <div class="clearfloat"></div>
    </div>
    </script>

    <script type="text/template" id="mapSearchTemplate">
    <div class="result{{rtype}}">
      <div class="searchResIconWrapper">
        <img class="icon" src="/assets/metamap32c.png">
      </div>
      <div class="resultText">
        <p class="resultTitle">{{label}}</p>
        <p class="resultDesc">{{description}}</p>
      </div>
      <div class="autoOptions">
        <div class="topicCount">
          {{topicCount}}
        </div>
        <div class="synapseCount">
          {{synapseCount}}
        </div>
        <div class="mapContributorsIcon hoverForTip">
          <span class="tip mapContributors">{{contributorList}}</span>
          {{contributorCount}}
        </div>
        <div class="mapPermission {{permission}}">
        </div>
      </div>
      <div class="clearfloat"></div>
    </div>
    </script>

    <script type="text/template" id="mapperSearchTemplate">
    <div class="result{{rtype}}">
      <div class="searchResIconWrapper">
        <img class="icon" width="32" height="32" src="{{profile}}">
      </div>
      <div class="resultText">
        <p class="resultTitle">{{label}}</p>
      </div>
      <div class="autoOptions">
        <div class="mapperCreated">
          <p>Mapping since: {{created_at}}</p>
        </div>
        <div class="mapperGeneration">
          <p>Generation: 1</p>
        </div>
        <div class="mapCount">
          {{mapCount}}
        </div>
      </div>
      <div class="clearfloat"></div>
    </div>
    </script>

    <script type="text/template" id="synapseAutocompleteTemplate">
      <div class="result{{rtype}}">
      <p class="autocompleteSection synapseDesc">{{label}}</p>
      <div class="expandSynapseMetadata"></div>
        <div class="synapseMetadata">
          <div class="synapseNumMaps">{{mapCount}}</div>
          <div class="synapseOriginatorIcon hoverForTip">
              <img width="24" height="24" src="{{originatorImage}}" />
              <span class="tip synapseOriginator">{{originator}}</span>
          </div>
          <div class="synapsePermission {{permission}}"></div>
        </div>
        <div class="clearfloat"></div>
      </div>
    </script>

    <script type="text/template" id="topicAutocompleteTemplate">
        <img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
        <p class="autocompleteSection topicTitle">{{label}}</p>
        <div class="expandTopicMetadata"></div>
        <div class="topicMetadata">
          <div class="topicNumMaps">{{mapCount}}</div>
          <div class="topicNumSynapses">{{synapseCount}}</div>
          <div class="topicOriginatorIcon hoverForTip">
              <img width="24" height="24" src="{{originatorImage}}" />
              <span class="tip topicOriginator">{{originator}}</span>
          </div>
          <div class="topicPermission {{permission}}"></div>
        </div>
        <div class="clearfloat"></div>
    </script>


    <script type="text/template" id="topicCardTemplate">
    <div class="CardOnGraph {{hasAttachment}}" id="topic_{{id}}">
        <span class="title"> 
            <div class="titleWrapper" id="titleActivator">      
              <span class="best_in_place best_in_place_name"                      
                    data-url="/topics/{{id}}"                                     
                    data-object="topic"                                           
                    data-attribute="name"
                    data-activator="#titleActivator"           
                    data-type="textarea">{{name}}</span>
            </div> 
        </span>
        <div class="links">
            <div class="linkItem icon">
                <div class="metacodeTitle {{metacode_class}}">
                  {{metacode}}
                  <div class="expandMetacodeSelect"></div>
                </div>
                <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
                <div class="metacodeSelect">{{{metacode_select}}}</div>
            </div>
            <div class="linkItem contributor">
                <img src="/assets/user.png" class="contributorIcon" width="32" height="32" />
                <div class="contributorName">{{username}}</div>
            </div>
            <a href="/explore/topics/{{id}}" class="linkItem mapCount" title="Click to see which maps topic appears on">                  
                 <div class="mapCountIcon"></div>
                 {{map_count}}                                                 
               </a> 
            <a href="/topics/{{id}}" class="linkItem synapseCount" title="Click to see this topics synapses">
              <div class="synapseCountIcon"></div>
              {{synapse_count}}
            </a>
            <div class="linkItem mapPerm {{mk_permission}}" title="{{permission}}"></div>
            <div class="clearfloat"></div>
        </div>
        <div class="scroll">
            <div class="desc">
                <span class="best_in_place best_in_place_desc" data-url="/topics/{{id}}" data-object="topic" data-nil="{{desc_nil}}" data-attribute="desc" data-type="textarea">{{desc}}</span> 
                <div class="clearfloat"></div>
            </div>
        </div>
        <div class="embeds">
           {{{embeds}}}
        </div>
        <div class="attachments {{attachmentsHidden}}">
            {{{attachments}}}
        </div>
        <div class="clearfloat"></div>
    </div>
    </script>
</div>