import os
from yattag import Doc

## --------------------------------- ###
###          creating html           ###
### -------------------------------- ###
def get_article(acc, feat):
  title = 'Potential Buyer Fit Analysis'
  description = 'How Well Does a Partner with the Selected Characteristics Fit?'
  
  # use yattag library to generate html
  doc, tag, text, line = Doc().ttl()
  
  # create html for accuracy and feature weight
  with tag('div'):
    with tag('div', klass='model-container'):
      with tag('div', klass='box model-div'):
        line('h2', "Model Accuracy", klass='acc-feat')
        line('p', acc, klass='num')
      with tag('div', klass='box model-div'):
        line('h2', "Most Important Feature", klass='acc-feat')
        line('p', feat, klass='num')
      
  css = '''
  .component {
    margin-bottom: 20px;
  }
  
  .panel-button {
    background-color: #7f7f7f !important;
    border: solid 1px #7f7f7f !important;
    color: #FFFFFF !important;
    margin: 5px;
    box-shadow: 0px 9px 0px #2a2b2b !important;
    transition: all .2s ease-out 0s !important;
  }
  
  .panel-button:hover {
    box-shadow: 0 5px #00AEAB;
    transform: translateY(5px);
  }
  
  .submit {
    background-color: #dd2184 !important;
    border: solid 1px #dd2184 !important;
    box-shadow: 0px 9px 0px #c14c89 !important;
  }
  
  .radio-item {
    transition: margin-top 0.3s ease, box-shadow 0.3s ease;
    transition: background-color 0.3s, color 0.3s;
    background-color: #c9e7fb !important;
    border: solid 1px #c9e7fb;
    margin: 5px;
    box-shadow: 0px 9px 0px #66bbf4;
    gap: 2px !important;
  }
  
  .selected {
    transition: margin-top 0.2s ease, box-shadow 0.2s ease;
    margin-top:9px;
    margin: 5px !important;
    box-shadow: 0px 9px 0px #3482c5 !important;
    border: solid 1px #7db9eb !important;
    background-color: #7db9eb !important;
  }
  
  .panel-header {
    background-color: #37aae0;
    color: #FFFFFF !important;
    padding: 5px !important;
  }
  
  .radio-item:hover {
    background-color: #7db9eb !important;
    border: solid 1px #7db9eb;
    box-shadow: 0px 9px 0px #3482c5 !important;
    color: #FFFFFF;
  }
  '''

  css += '''
  .panel {
    background-image: url("https://drive.google.com/uc?id=1hghDRktdWwNE3Up03hDbjBSf5QxIbhqI");
    background-size: 600px 400px !important;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .output-text {
    border-radius: 20px;
    text-align: center;
  }
  
  .duration {
    visibility: hidden !important;
  }
  
  .box {
    background-color: #7f7f7f !important;
    margin: 10px;
    padding: 5px;
  }
  
  .acc-feat {
    color: #FFFFFF !important;
  }
  
  .num {
    margin-top: 3px;
    margin-left: 10%;
    margin-right: 3%;
    padding: 5px;
    border-radius: 15px;
    background-color: #FFFFFF !important;
    text-align: right;
  }
  
  .description {
    text-align: center;
  }
  
  .model-container {
    display: flex;
    justify-content: space-around !important;
  }
  
  .model-div {
    width: 40%;
  }
  
  .input-radio {
    flex-wrap: nowrap !important;
  }
  '''
  
  return {
    'article': doc.getvalue(),
    'css': css,
    'title': title,
    'description': description,
  }