{% extends "base.html" %}

{% block title %}
{{ name }}
{% endblock %}

{% block breadcrumbs %}
<ul>
  <li><a href="/">{{ crate::hostname() }}</a></li>
  <li><a href="/{{ name }}">{{ name }}</a></li>
</ul>
{% endblock %}

{% block content %}
<h1>{{ name }}</h1>

{% if let Some(description) = description %}
<p>{{ description }}</p>
{% endif %}
<details>
  <summary><svg class="summary-icon"><use href="#icon-copy"/></svg>Clone</summary>
  <ul>
    <li><button data-url="git@{{ crate::hostname() }}:{{ crate::ssh_prefix() }}{{ name }}.git"><span>git@{{ crate::hostname() }}:{{ crate::ssh_prefix() }}{{ name }}.git</span><span>SSH</span></button></li>
    <li><button data-url="https://{{ crate::hostname() }}/{{ name }}.git"><span>https://{{ crate::hostname() }}/{{ name }}.git</span><span>HTTPS</span></button></li>
  </ul>
</details>

{% if let Some(branch) = default_branch %}
<details>
  <summary><svg class="summary-icon"><use href="#icon-archive"/></svg>Archive</summary>
  <ul>
    <li><a href="/{{ name }}/archive/tar.gz/refs/heads/{{ branch }}" download="{{ name }}-{{ branch }}.tar.gz"><span class="archive-link">{{ name }}-{{ branch }}.tar.gz</span><span>tar.gz</span></a></li>
    <li><a href="/{{ name }}/archive/tar.xz/refs/heads/{{ branch }}" download="{{ name }}-{{ branch }}.tar.xz"><span class="archive-link">{{ name }}-{{ branch }}.tar.xz</span><span>tar.xz</span></a></li>
    <li><a href="/{{ name }}/archive/zip/refs/heads/{{ branch }}" download="{{ name }}-{{ branch }}.zip"><span class="archive-link">{{ name }}-{{ branch }}.zip</span><span>zip</span></a></li>
  </ul>
</details>
{% endif %}

<details>
  <summary><svg class="summary-icon"><use href="#icon-branch"/></svg>Branches <span>[{{ branches.len() }}]</span></summary>
  <ul>
    {% for branch in branches.iter().take(5) %}
    <li><a href="/{{ name }}/branches/{{ branch.name }}"><span class="branch-name">{{ branch.name }}</span>{% if branch.is_default %}<span>default</span>{% endif %}<span>{{ branch.date }}</span></a></li>
    {% endfor %}
    {% if branches.len() > 5 %}
    <li><a href="/{{ name }}/branches" class="see-all"><span>see all {{ branches.len() }} branches</span><span>[&gt;]</span></a></li>
    {% endif %}
    {% if branches.is_empty() %}
    <li>no branches</li>
    {% endif %}
  </ul>
</details>

<details>
  <summary><svg class="summary-icon"><use href="#icon-tag"/></svg>Tags <span>[{{ tags.len() }}]</span></summary>
  <ul>
    {% for tag in tags.iter().take(5) %}
    <li><a href="/{{ name }}/tags/{{ tag.name }}"><span class="tag-name">{{ tag.name }}</span><span>{{ tag.date }}</span></a></li>
    {% endfor %}
    {% if tags.len() > 5 %}
    <li><a href="/{{ name }}/tags" class="see-all"><span>see all {{ tags.len() }} tags</span><span>[&gt;]</span></a></li>
    {% endif %}
    {% if tags.is_empty() %}
    <li>no tags</li>
    {% endif %}
  </ul>
</details>

<div class="repo-nav">
  {% if let Some(sha) = head_sha %}
  <a href="/{{ name }}/commits/{{ sha }}/tree" class="repo-nav-item">
    <svg class="summary-icon"><use href="#icon-tree"/></svg>
    <span>Tree</span>
    <span class="repo-nav-item-meta">[{{ sha[..8] }}]</span>
    <span class="repo-nav-item-arrow">[&gt;]</span>
  </a>
  {% endif %}
  <a href="/{{ name }}/commits" class="repo-nav-item">
    <svg class="summary-icon"><use href="#icon-commits"/></svg>
    <span>Commits</span>
    <span class="repo-nav-item-meta">[{{ commit_count }}]</span>
    <span class="repo-nav-item-arrow">[&gt;]</span>
  </a>
</div>

{% if let Some(readme) = readme %}
<article>
  {{ readme | safe }}
</article>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
  document.querySelectorAll('[data-url]').forEach(btn => {
    const span = btn.querySelector('span:first-child');
    const url = btn.dataset.url;
    btn.addEventListener('click', () => {
      navigator.clipboard.writeText(url);
      span.style.opacity = '0';
      setTimeout(() => { span.textContent = 'copied!'; span.style.opacity = '1'; }, 100);
      setTimeout(() => {
        span.style.opacity = '0';
        setTimeout(() => { span.textContent = url; span.style.opacity = '1'; }, 100);
      }, 1100);
    });
  });
</script>
{% endblock %}