mmpSearch/pages/perfil.md

layout	title	permalink
default	Meu Perfil - MMPSearch	/perfil/

  <div class="tabs is-centered is-boxed is-medium mb-6">
    {% include sidebar.html %}
  </div>

  <div class="box p-0" style="overflow: hidden; border-radius: 12px; position: relative;">
    <div id="cover-container" style="height: 200px; background-color: #ddd; background-size: cover; background-position: center; position: relative;">
        <button class="button is-small is-white is-rounded" style="position: absolute; top: 10px; right: 10px; opacity: 0.8;" onclick="document.getElementById('cover-input').click()">
            <i class="fa-solid fa-camera mr-1"></i> Alterar Capa
        </button>
        <input type="file" id="cover-input" class="is-hidden" accept="image/*">
    </div>
    
    <div class="p-5" style="position: relative;">
        <div style="position: absolute; top: -60px; left: 30px;">
            <figure class="image is-128x128">
                <img id="avatar-img" class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png" style="border: 4px solid white; background: white; object-fit: cover;">
            </figure>
            <button class="button is-small is-rounded is-light" style="position: absolute; bottom: 0; right: 0;" onclick="document.getElementById('avatar-input').click()">
                <i class="fa-solid fa-pencil"></i>
            </button>
            <input type="file" id="avatar-input" class="is-hidden" accept="image/*">
        </div>

        <div class="columns" style="margin-top: 50px;">
            <div class="column is-8">
                <h1 class="title is-3" id="display-username">Carregando...</h1>
                
                <p class="subtitle is-6 has-text-grey" id="display-bio">...</p>
                
                <div class="tags mt-3" id="display-tags">
                    </div>
            </div>
            
            <div class="column is-4 has-text-right">
                <button class="button is-info is-outlined" id="btn-edit-profile">
                    <i class="fa-solid fa-edit mr-2"></i> Editar Perfil
                </button>
            </div>
        </div>
    </div>
  </div>

  <div id="edit-form-box" class="box is-hidden has-background-light">
    <h3 class="title is-5"><i class="fa-solid fa-user-cog"></i> Editar Informações</h3>
    <form id="profile-form">
        <div class="field">
            <label class="label">Nome de Usuário</label>
            <div class="control has-icons-left">
                <input class="input" type="text" name="username" id="input-username" required>
                <span class="icon is-small is-left"><i class="fa-solid fa-user"></i></span>
            </div>
            <p class="help">Alterar seu nome pode quebrar links antigos.</p>
        </div>

        <div class="field">
            <label class="label">Bio (Max 240)</label>
            <div class="control">
                <textarea class="textarea" name="bio" id="input-bio" maxlength="240" rows="2"></textarea>
            </div>
            <p class="help has-text-right" id="char-count">0/240</p>
        </div>

        <div class="field">
            <label class="label">Tags (separadas por vírgula)</label>
            <div class="control has-icons-left">
                <input class="input" type="text" name="tags" id="input-tags" placeholder="Ex: Trap, Dark, Samples, LMMS">
                <span class="icon is-small is-left"><i class="fa-solid fa-hashtag"></i></span>
            </div>
        </div>

        <div class="field is-grouped">
            <div class="control">
                <button type="submit" class="button is-success">Salvar Alterações</button>
            </div>
            <div class="control">
                <button type="button" class="button is-light" id="btn-cancel-edit">Cancelar</button>
            </div>
        </div>
        <div id="update-msg" class="notification is-hidden mt-2"></div>
    </form>
  </div>

  <div class="box mt-5">
    <div class="tabs is-boxed">
        <ul>
            <li class="is-active" data-tab="projects-tab"><a><span class="icon"><i class="fa-solid fa-folder"></i></span> <span>Projetos</span></a></li>
            <li data-tab="samples-tab"><a><span class="icon"><i class="fa-solid fa-music"></i></span> <span>Samples</span></a></li>
            <li data-tab="recordings-tab"><a><span class="icon"><i class="fa-solid fa-microphone"></i></span> <span>Gravações</span></a></li>
        </ul>
    </div>

    <div id="projects-tab" class="content-tab-content">
        <div class="table-container">
            <table class="table is-fullwidth is-hoverable">
                <thead><tr><th>Nome</th><th>Data</th><th>Ações</th></tr></thead>
                <tbody id="projects-list">
                    </tbody>
            </table>
            <p id="no-projects" class="has-text-grey is-hidden has-text-centered p-4">Nenhum projeto encontrado.</p>
        </div>
    </div>

    <div id="samples-tab" class="content-tab-content is-hidden">
         <p class="has-text-centered has-text-grey p-5">Funcionalidade de Samples em desenvolvimento.</p>
    </div>

    <div id="recordings-tab" class="content-tab-content is-hidden">
        <p class="has-text-centered has-text-grey p-5">Funcionalidade de Gravações em desenvolvimento.</p>
    </div>

  </div>

</div>