{% 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 %}
<p class="repo-commit-count">{{ commit_count }} {% if commit_count == 1 %}commit{% else %}commits{% endif %}</p>

<details>
  <summary>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>

<details>
  <summary>Branches <span>{{ branches.len() }}</span></summary>
  <ul>
    {% for branch in branches.iter().take(5) %}
    <li><a href="/{{ name }}/branches/{{ branch.name }}"><span>{{ 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">see all {{ branches.len() }} branches</a></li>
    {% endif %}
    {% if branches.is_empty() %}
    <li>no branches</li>
    {% endif %}
  </ul>
</details>

<details>
  <summary>Tags <span>{{ tags.len() }}</span></summary>
  <ul>
    {% for tag in tags.iter().take(5) %}
    <li><a href="/{{ name }}/tags/{{ tag.name }}"><span>{{ tag.name }}</span><span>{{ tag.date }}</span></a></li>
    {% endfor %}
    {% if tags.len() > 5 %}
    <li><a href="/{{ name }}/tags">see all {{ tags.len() }} tags</a></li>
    {% endif %}
    {% if tags.is_empty() %}
    <li>no tags</li>
    {% endif %}
  </ul>
</details>

{% 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 %}