% rebase('frame.tpl')
% import random
<div class="content-grid">
    <div class="title">
        <h1>characters </h1>
    </div>
    <div class="ocs-nav">
        % for o in ocs:
            <a href="/char/{{o}}">
                <img src="/static/img/char/{{o}}/nav.png" alt="(link: {{o}})">
            </a>
        % end  
    </div>
    <div class="profile">
        <div class="name">
            <h2>{{!name}} </h2>
        </div>
        <div class="label">
            {{!profile[0]}}
        </div>
        <div class="basics">
            <h2>basics </h2>
            {{!profile[1]}}
        </div>
        % if len(profile[2]) > 0:
        <div class="story">
            <h2>story </h2>
            {{!profile[2]}}
        </div>
        % end
        % if len(profile[3]) > 0:
        <div class="desc">
        <h2>description </h2>
            {{!profile[3]}}
        </div>
        % end
    </div>
    <div class="portrait">
        <div style="background-image: url(/static/img/char/{{name}}/portrait.png); height: 100%; background-repeat: no-repeat; background-position: bottom left;"></div>

    </div>

    % if len(gallery) > 1:
    % print(gallery)
    <div class="gallery-div"><h2>gallery </h2><div class="gallery">
        % if len(gallery) >=2:
        % for g in gallery[2]:
        % i = g[0].index('.')
        % thumb = g[0][:i] + 'thumb' + g[0][i:]
        <div class="galitem">
            <a target="_blank" href="/static/img/char/{{gallery[0]}}/{{g[0]}}">
                <img src="/static/img/char/{{gallery[0]}}/{{thumb}}" alt="Image: {{g[1]}}">
                <div class="subtitle">{{g[1]}}</div>
            </a>
        </div>
        % end
        % end
    </div></div>
    % end
</div>