{% extends "root.html" %} {% block head %}
<title>{{ profile.username }} - {{ config.name }}</title>
<meta name="og:title" content="{{ profile.username }}" />
<meta
name="description"
content="View @{{ profile.username }}'s profile on {{ config.name }}!"
/>
<meta
name="og:description"
content="View @{{ profile.username }}'s profile on {{ config.name }}!"
/>
<meta property="og:type" content="profile" />
<meta property="profile:username" content="{{ profile.username }}" />
<meta
name="og:image"
content="{{ config.host|safe }}/api/v1/auth/user/{{ profile.username }}/avatar?selector_type=username"
/>
<meta
name="twitter:image"
content="{{ config.host|safe }}/api/v1/auth/user/{{ profile.username }}/avatar?selector_type=username"
/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{ profile.username }}" />
<meta
name="twitter:description"
content="View @{{ profile.username }}'s profile on {{ config.name }}!"
/>
{% endblock %} {% block body %} {{ macros::nav() }}
<article>
<div class="content_container flex flex-col gap-4">
{{ components::banner(username=profile.username) }}
<div class="w-full flex gap-4 flex-collapse">
<div
class="lhs flex flex-col gap-2 sm:w-full"
style="width: 22rem; min-width: 22rem"
>
<div class="card-nest w-full">
<div class="card flex gap-2" id="user_avatar_and_name">
{{
components::avatar(username=profile.username,size="72px")
}}
<div class="flex flex-col">
<!-- prettier-ignore -->
<h3 id="username" class="username flex items-center gap-2">
<span class="name shorter">{{ components::username(user=profile) }}</span>
{% if profile.is_verified %}
<span title="Verified" style="color: var(--color-primary);" class="flex items-center">
{{ icon "badge-check" }}
</span>
{% endif %}
{% if is_supporter %}
<span title="Supporter" style="color: var(--color-primary);" class="flex items-center">
{{ icon "star" }}
</span>
{% endif %}
</h3>
<span class="fade">{{ profile.username }}</span>
</div>
</div>
<div
class="card flex flex-col items-center gap-2"
id="social"
>
<div class="w-full flex">
<a
href="/@{{ profile.username }}/followers"
class="w-full flex justify-center items-center gap-2"
>
<h4>{{ profile.follower_count }}</h4>
<span>{{ text "auth:label.followers" }}</span>
</a>
<a
href="/@{{ profile.username }}/following"
class="w-full flex justify-center items-center gap-2"
>
<h4>{{ profile.following_count }}</h4>
<span>{{ text "auth:label.following" }}</span>
</a>
</div>
{% if is_following_you %}
<b
class="notification chip w-content flex items-center gap-2"
>
{{ icon "heart" }}
<span>Follows you</span>
</b>
{% endif %}
</div>
</div>
<div class="card-nest flex flex-col">
<div id="bio" class="card small no_p_margin">
{{ profile.settings.biography|markdown|safe }}
</div>
<div class="card flex flex-col gap-2">
<!-- prettier-ignore -->
<div style="display: contents;">
{% if profile.connections.Spotify and profile.connections.Spotify[0].data.name and profile.connections.Spotify[0].show_on_profile %}
{{ components::spotify_playing(state=profile.connections.Spotify[1]) }}
{% endif %}
</div>
<div class="w-full flex justify-between items-center">
<span class="notification chip">ID</span>
<button
title="Copy"
onclick="trigger('atto::copy_text', ['{{ profile.id }}'])"
class="camo small"
>
{{ icon "copy" }}
</button>
</div>
<div class="w-full flex justify-between items-center">
<span class="notification chip">Joined</span>
<span class="date">{{ profile.created }}</span>
</div>
<div class="w-full flex justify-between items-center">
<span class="notification chip">Posts</span>
<span>{{ profile.post_count }}</span>
</div>
{% if not profile.settings.private_last_seen or is_self
or is_helper %}
<div class="w-full flex justify-between items-center">
<span class="notification chip">Last seen</span>
<div class="flex">
{{ components::online_indicator(user=profile) }}
<span class="date">
{{ profile.last_seen }}
</span>
</div>
</div>
{% endif %}
</div>
</div>
{% if not is_self and user %}
<div class="card-nest">
<div class="card small">
<b>{{ text "auth:label.relationship" }}</b>
</div>
<div class="card flex gap-2 flex-wrap">
{% if not is_blocking %}
<button
onclick="toggle_follow_user(event)"
class="{% if is_following %} hidden{% endif %}"
atto_tag="user.follow"
>
{{ icon "user-plus" }}
<span>{{ text "auth:action.follow" }}</span>
</button>
<button
onclick="toggle_follow_user(event)"
class="quaternary red{% if not is_following %} hidden{% endif %}"
atto_tag="user.unfollow"
>
{{ icon "user-minus" }}
<span>{{ text "auth:action.unfollow" }}</span>
</button>
<button
onclick="toggle_block_user()"
class="quaternary red"
>
{{ icon "shield" }}
<span>{{ text "auth:action.block" }}</span>
</button>
{% else %}
<button
onclick="toggle_block_user()"
class="quaternary red"
>
{{ icon "shield-off" }}
<span>{{ text "auth:action.unblock" }}</span>
</button>
{% endif %} {% if is_helper %}
<a
href="/mod_panel/profile/{{ profile.id }}"
class="button quaternary"
>
{{ icon "shield" }}
<span>{{ text "general:action.manage" }}</span>
</a>
{% endif %}
<script>
globalThis.toggle_follow_user = async (e) => {
await trigger("atto::debounce", [
"users::follow",
]);
fetch(
"/api/v1/auth/user/{{ profile.id }}/follow",
{
method: "POST",
},
)
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (
e.target.getAttribute(
"atto_tag",
) === "user.follow"
) {
document
.querySelector(
'[atto_tag="user.follow"]',
)
.classList.add("hidden");
document
.querySelector(
'[atto_tag="user.unfollow"]',
)
.classList.remove("hidden");
} else {
document
.querySelector(
'[atto_tag="user.unfollow"]',
)
.classList.add("hidden");
document
.querySelector(
'[atto_tag="user.follow"]',
)
.classList.remove("hidden");
}
});
};
globalThis.toggle_block_user = async () => {
if (
!(await trigger("atto::confirm", [
"Are you sure you would like to do this?",
]))
) {
return;
}
fetch(
"/api/v1/auth/user/{{ profile.id }}/block",
{
method: "POST",
},
)
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
</script>
</div>
</div>
{% endif %} {% if not profile.settings.private_communities or
is_self or is_helper %}
<div class="card-nest">
<div class="card small flex gap-2 items-center">
{{ icon "users-round" }}
<span>{{ text "auth:label.joined_communities" }}</span>
</div>
<div class="card flex flex-wrap gap-2">
{% for community in communities %}
<a href="/community/{{ community.title }}">
{{ components::community_avatar(id=community.id,
community=community, size="48px") }}
</a>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<div class="rhs w-full flex flex-col gap-4">
{% block content %}{% endblock %}
</div>
</div>
</div>
</article>
{% if not is_self and profile.settings.warning %}
<script>
setTimeout(() => {
// check for warning
trigger("warnings::open", [
"{{ profile.id }}",
"{{ warning_hash }}",
"?warning=true",
]);
}, 150);
</script>
{% endif %} {% if not use_user_theme %} {{ components::theme(user=profile,
theme_preference=profile.settings.profile_theme) }} {% endif %} {% endblock %}