<!-- BUTTONS -->


{%- macro icon_link_button(icon, fb_text, link, args="") -%}
<a class="icon button" href="{{ link }}" data-icon="{{ icon }}" title="{{ fb_text }}" {{ args }}>
    {{- fb_text -}}
</a>
{%- endmacro -%}



<!-- 
    Second span in copy-tooltip is fix for firefox animation font bug
    https://bugzilla.mozilla.org/show_bug.cgi?id=1757017
-->
{%- macro copy_button(name, link) -%}

<div class="copy-button icon" onclick="CopyCode(event)" data-icon="content_copy">
    Copy <span class="copy-tooltip"><span></span></span>
</div>

{%- endmacro -%}



{%- macro settings_option(option_name) -%}
<hr><span class="line-block">{{ switch(option_name) }}{{ caller() }}</span>
{%- endmacro -%}



{%- macro icon(name, fallback) -%}
<span class="icon" data-icon="{{ name }}">{{ fallback }}</span>
{%- endmacro -%}



{%- macro invert_theme_button() -%}
{%- set mode = THEME_MODES[not g.dark_mode] -%}
{%- set class = ("button", "theme-apply", "icon", g.theme, mode) | join(" ") -%}

{%- macro args() -%}
    id="invert-theme-button" class="{{ class }}" title="Invert theme"
{%- endmacro -%}

{%- if g.use_js -%}
<div {{ args() }} onclick="invertTheme(event)">Aa</div>
{%- else -%}
<form action="" method="post">
    <input type="hidden" name="dark_mode" value="{{ to_bool_str(not g.dark_mode) }}">
    <button type="submit" {{ args() }}>Aa</button>
</form>

{%- endif -%}

{%- endmacro -%}



{%- macro set_theme_button(theme, mode) -%}
{%- set class = ("button", "theme-apply", theme, mode) | join(" ") -%}
{%- set dark_mode = to_bool_str(THEME_MODES.index(mode)) -%}

{%- if g.use_js -%}
<div class="{{ class }}" onclick="setTheme('{{ theme }}', '{{ mode }}')">Aa</div>
{%- else -%}
<form action="" method="post">
    <input type="hidden" name="theme" value="{{ theme }}">
    <input type="hidden" name="dark_mode" value="{{ dark_mode }}">
    <button type="submit" class="{{ class }}">Aa</button>
</form>
{%- endif -%}

{%- endmacro -%}



<!-- SWITCHES AND SLIDERS -->


{%- macro switch(option) -%}
{%- set checked = "checked" if g[option] else "" -%}

{%- if g.use_js -%}
<label class="switch">
    <input type="checkbox" {{ checked }} onchange="switchOption(event, '{{ option }}')">
    <div class="frame slider"></div>
</label>

{%- else -%}
<form action="" method="post" class="switch">
    <input type="hidden" name="{{ option }}" value="{{ to_bool_str(not g[option]) }}">
    <input id="{{option}}" type="checkbox" {{ checked }}>
    <button class="frame slider"></button>
</form>
{%- endif -%}

{%- endmacro -%}



<!-- COMPLEX PAGE ELEMENTS -->


{%- macro breadcrumbs() -%}

<div class="breadcrumbs"><span>
    {%- for name, link in g.rpath.breadcrumbs_links -%}
        {{- " / " -}}
        {%- if not loop.last -%}
            <a href="{{ link }}">{{ name }}</a>
        {%- elif g.rpath.is_not_found -%}
            <s>{{ name }}</s>
        {%- else -%}
            {{ name }}
        {%- endif -%}
    {%- endfor -%}
</span></div>

{%- endmacro -%}



{%- macro folder_file_list() -%}

<div class="file-list">
    <a class="button" href="{{ g.rpath.parent or '/' }}">
        {{- icon("drive_file_move_rtl", FOLDER_EMOJI) -}} ..
    </a>

    {%- for file in g.rpath.files -%}
        <a class="button" href="{{ g.rpath.path }}/{{ file.name }}">
            {%- if file.is_dir() -%}
                {{ icon("folder", FOLDER_EMOJI) }}
            {%- else -%}
                {{ icon("description", FILE_EMOJI) }}
            {%- endif -%}

            {{- file.name -}}
        </a>
    {%- endfor -%}
</div>

{%- endmacro -%}



{%- macro article_preview_block(articles_path="articles") -%}

<div class="preview-block">
    {%- for article in get_articles(articles_path) -%}
        {{ article.include() }}
    {%- endfor -%}
</div>

{%- endmacro -%}



{%- macro raw_link_buttons() -%}

{{ icon_link_button("file_download", "Download", g.rpath.raw_path, "download") }}
{{ icon_link_button("link", "Direct link", g.rpath.raw_path) }}

{%- endmacro -%}