window.addEventListener("load", solve);

function solve() {
  //TODO ...

  const publishButton= document.getElementById('publish-btn');
  const titleElement=document.getElementById('post-title');
  const catecoryElement=document.getElementById('post-category')
  const contentElement= document.getElementById('post-content')
  const reviewListElement = document.getElementById('review-list');
  const uploadedPostsListElement = document.getElementById('published-list');

  publishButton.addEventListener('click', (e)=>{
    e.preventDefault();

    let title=titleElement.value;
    let category=catecoryElement.value;
    let content = contentElement.value;

    titleElement.value= ''
    catecoryElement.value=''
    contentElement.value=''


    let rowElement = document.createElement('li');
    let articleElement = document.createElement('article');
    let titleCellelement = document.createElement('h4');
    let categoryCellelement = document.createElement('p');
    let contentCellelement = document.createElement('p');
    let editButtonElement = document.createElement('button');
    let approveButtonElement = document.createElement('button');
    let clearButtonElement = document.getElementById('clear-btn');
    let approvedArticleElement = document.createElement('article');
    let aprrovedRowElement = document.createElement('li');
    aprrovedRowElement.classList.add("rpost");

    titleCellelement.textContent = title;
    categoryCellelement.textContent = `Category: ${category}`;
    contentCellelement.textContent = `Content: ${content}`;

    editButtonElement.classList.add("action-btn");
    editButtonElement.textContent = 'Edit';
    editButtonElement.addEventListener('click', (e) => {
      rowElement.remove();

      titleElement.value = title;
      catecoryElement.value = category;
      contentElement.value = content;
    })

    approveButtonElement.classList.add("action-btn");
    approveButtonElement.textContent = 'Approve';
    approveButtonElement.addEventListener('click', (e) => {
      rowElement.remove();


      approvedArticleElement.appendChild(titleCellelement);
      approvedArticleElement.appendChild(categoryCellelement);
      approvedArticleElement.appendChild(contentCellelement);

      aprrovedRowElement.appendChild(approvedArticleElement);
      uploadedPostsListElement.appendChild(aprrovedRowElement);
    })

    rowElement.classList.add("rpost");

    articleElement.appendChild(titleCellelement);
    articleElement.appendChild(categoryCellelement);
    articleElement.appendChild(contentCellelement);

    rowElement.appendChild(articleElement);

    rowElement.appendChild(editButtonElement);
    rowElement.appendChild(approveButtonElement);
    //firt is edit or aprrove?????

    reviewListElement.appendChild(rowElement);

    clearButtonElement.addEventListener('click', (e) => {
      aprrovedRowElement.remove();
    })

  })
}