{% macro render_project_tooltip(project) %}
	data-ident="{{ project.ident or '' }}"
	data-status="{{ project.summary|truncate(140, True, '..') }}"
	data-imageurl="{{ project.image_url|quote_plus }}"{#
		> Status icons in tooltip:
	#}data-summary="{{ project.phase }}"
{% endmacro %}

<!-- Based on Hexagon Tiles by Graham Pyne http://codepen.io/gpyne/pen/iElhp/ -->
{% macro render_project_hexagon(project) %}
	<a href="{{ url_for('project.project_view', project_id=project.id) }}"
		 class="hexagon {{
		 	'challenge' if project.is_challenge else 'project'
		 }}{{
		 	' stage-%d' % project.progress if project.progress
		 }} category-highlight"
		 {% if project.category_id %}
		 	 category-id="{{ project.category_id }}"
		 {% endif %}
		 {% if project.logo_color %}
		 	 style="border-bottom-color:{{ project.logo_color }}"
		 {% endif %}
		 {{ render_project_tooltip(project) }}
		>
		 {{ render_hexagontent(project) }}
		{% if project.is_challenge %}
			<div class="team-counter" title="Team size ({{ project.score }})">
				{% if project.score == 1 %}
					<i class="fa fa-user"></i>
				{% elif project.score == 2 %}
					<i class="fa fa-user"></i><i class="fa fa-user"></i>
				{% elif project.score > 2 %}
					<i class="fa fa-users"></i>
				{% endif %}
			</div>
		{% endif %}
	</a>
{% endmacro %}

{% macro render_challenge_hexagon(project) %}
	<a href="{{ url_for('project.get_challenge', project_id=project.id) }}"
		 class="hexagon challenge category-highlight"
		 {% if project.category_id %}
		 	 category-id="{{ project.category_id }}"
		 {% endif %}
		 {{ render_project_tooltip(project) }}
		>
		 {{ render_hexagontent(project) }}
	</a>
{% endmacro %}

{% macro render_hexagontent(project) %}
	<div class="hexagontent {{
        'text-md' if 32 < project.name|length else 'text-sm' if 42 < project.name|length
	}}{{ ' with-icon' if project.logo_icon or project.image_url }}"
		title="{{ project.summary|truncate(200, True, '..') }}">
		{% if project.score and project.score > 90 %}
			<span class="team-boost" title="Skyrocketing">🚀</span>
		{% elif project.score and project.score > 69 %}
			<span class="team-boost" title="Trending">🔥</span>
		{% endif %}
		<span class="project-name">{{ project.name|truncate(60, True, '..') }}</span>
		{% if project.image_url or project.logo_icon or project.ident %}
			<div class="hexaicon {% if project.image_url %}im" style="background-color:{{project.logo_color or '#FFF'}};background-image:url('{{project.image_url|quote_plus}}'){% endif %}">
				{% if project.ident %}
					<span class="project-ident">{{ project.ident }}</span>
				{% elif project.logo_icon %}
          {% if project.logo_icon|length==1 %}
            <span class="logo_icon">{{project.logo_icon}}</span>
          {% else %}
            <i class="fa fa-{{project.logo_icon}}"{% if project.logo_color %} style="color:{{project.logo_color}}"{% endif %}></i>
          {% endif %}
				{% endif %}
			</div>
		{% endif %}
	</div>
{% endmacro %}

{% macro render_empty_hexagon() %}
	<a class="hexagon challenge blank">
		<div class="hexagontent"></div>
	</a>
{% endmacro %}

{% macro render_project_stats(project) %}
  <table class="project-stats">
    {% if project.stats and project.stats.people %}
      <th title="People"><i class="fa fa-user-circle me-2 ms-3"></i>{{ project.stats.people }}</th>
      <th title="Posts"><i class="fa fa-sticky-note me-2 ms-3"></i>{{ project.stats.total }}</th>
      <th title="Dribs"><i class="fa fa-star me-2 ms-3"></i>{{ project.stats.updates }}</th>
    {% endif %}
    {% if project.age %}
      <th title="Started"><i class="fa fa-clock-o me-2 ms-3"></i>{{ project.age|since_date }}</th>
    {% endif %}
  </table>
{% endmacro %}

{% macro render_join_card(project) %}
	<div class="col-lg-12 mb-1">
	    <a class="card {{ 'challenge' if project.is_challenge else 'project' }}"
			href="{{ url_for('project.project_view', project_id=project.id) }}" target="_blank">
		<div class="card-header w-100">
			  {% if False and project.image_url %}
				<img height="60" class="card-img-left pe-3" src="{{project.image_url}}">
			  {% endif %}
			  <h5 class="card-title pt-2">
          {% if project.stats and project.stats.people %}
            <div class="float-right mb-2" title="People"><i class="fa fa-user-circle me-2 ms-3"></i>{{ project.stats.people }}</div>
          {% endif %}
          {% if project.ident %}
            <span class="project-ident me-2">#{{ project.ident }}</span>
          {% endif %}
          <span>{{ project.name }}</span>
        </h5>
		</div>
		</a>
	</div>
{% endmacro %}


{% macro render_project_card(project) %}
	<div class="col-lg-4 mb-4">
	    <a class="card {{ 'challenge' if project.is_challenge else 'project' }}"
		   href="{{ url_for('project.project_view', project_id=project.id) }}">
			<div class="card-header w-100">
				<h5 class="card-title pt-2">
          {% if project.ident %}
            <span class="project-ident float-left me-2">#{{ project.ident }}</span>
          {% endif %}
          {{ project.name }}
        </h5>
			</div>
		  <div class="card-body bg-body text-body">
        <div class="card-text">
          {% if project.image_url %}
            <img height="60" class="card-img-left pe-2 mb-2" src="{{project.image_url}}">
          {% endif %}
          <p class="project-summary">
            {{ project.summary }}
          </p>
          {% if project.score and not project.is_challenge %}
            <div class="project-score">
              <div class="progress" title="Summary of progress">
                <div class="progress-bar" role="progressbar" style="width:{{project.score}}%">{{project.score}}</div>
              </div>
            </div>
          {% endif %}
          {{ render_project_stats(project) }}
        </div>
			</div>
	    </a>
	</div>
{% endmacro %}

{% macro render_resource_card(project) %}
	<div class="col-lg-4 mb-4">
	  <a href="{{ url_for('project.project_view', project_id=project.id) }}" style="text-decoration:none">
	    <div class="card challenge">
        <div class="card-header w-100 clearfix bg-light">
          {% if project.image_url %}
            <img height="60" class="card-img-left pe-3" src="{{project.image_url}}">
          {% endif %}
          <h5 class="card-title text-black">{{ project.name }}</h5>
        </div>
        <div class="card-body bg-body text-body">
          <div class="card-text">
            {% if project.summary %}
              <p class="project-summary">
                {{ project.summary }}
              </p>
            {% else %}
              <p class="project-longtext">
                {{ project.longtext|truncate(120) }}
              </p>
            {% endif %}
          </div>
        </div>
        <div class="card-footer">
          {% if project.download_url %}
            <a href="{{ project.download_url }}" target="_blank" rel="noopener noreferrer"
              class="btn btn-sm btn-outline-light border-light" title="Download">
              <i class="fa fa-arrow-down"></i>
            </a>
          {% endif %}

          {% if project.source_url %}
            <a href="{{ project.source_url }}" target="_blank" rel="noopener noreferrer"
              class="btn btn-sm btn-outline-light border-light" title="Source available">
              <i class="fa fa-github"></i>
            </a>
          {% endif %}

          <div class="card-text float-right opacity-50" title="Project stage">
            {{project.phase}}
          </div>
        </div>
	    </div>
	  </a>
	</div>
{% endmacro %}