<commit_before>import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-button/paper-button.js';
import '@unicef-polymer/etools-info-tooltip/etools-info-tooltip.js';
import '@unicef-polymer/etools-content-panel/etools-content-panel.js';
import '@unicef-polymer/etools-data-table/etools-data-table.js';

import CONSTANTS from '../../../../../../../config/app-constants';
import CommonMixin from '../../../../../../mixins/common-mixin';
import {gridLayoutStyles} from '../../../../../../styles/grid-layout-styles.js';
import {SharedStyles} from '../../../../../../styles/shared-styles.js';
import {buttonsStyles} from '../../../../../../styles/buttons-styles.js';
import '../../../../../../mixins/common-mixin.js';
import './add-ag-amendment-dialog.js';
import {connect} from 'pwa-helpers/connect-mixin';
import {store, RootState} from '../../../../../../../store';
import {isJsonStrMatch} from '../../../../../../utils/utils';
import {fireEvent} from '../../../../../../utils/fire-custom-event';
import {property} from '@polymer/decorators';
import {LabelAndValue} from '../../../../../../../typings/globals.types';
import {AddAgAmendmentDialog} from './add-ag-amendment-dialog.js';


/**
 * @polymer
 * @customElement
 * @appliesMixin CommonMixin
 */
class AgreementAmendments extends connect(store)(CommonMixin(PolymerElement)) {

  static get template() {
    return html`
      ${gridLayoutStyles} ${SharedStyles} ${buttonsStyles}
      <style
          include="data-table-styles">
        [hidden] {
          display: none !important;
        }

        :host {
          display: block;
          width: 100%;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }

        .file-wrapper {
          width: 100%;
          max-width: 100%;
        }

        #amendments-wrapper {
          margin-top: 16px;
        }

        :host(:not([edit-mode])) #amendments-wrapper {
          margin-bottom: 24px;
        }

        /* amendment template download section styles start */
        #download-template-msg {
          max-width: calc(100% - 210px);
        }

        #download-template-btn {
          max-width: 220px;
          margin: 0 0 0 24px;
          padding: 0;
        }

        #download-template-a {
          display: inherit;
        }

        /* amendment template download section styles end */

        .attachment {
          color: var(--dark-icon-color);
          margin-right: 8px;
        }
        .unsaved-amendment {
          color: var(--warning-color);
        }
      </style>

      <etools-content-panel panel-title="Amendments ([[dataItems.length]])">

        <div slot="panel-btns">
          <paper-icon-button icon="add-box"
                            hidden$="[[!editMode]]"
                            disabled$="[[!editMode]]"
                            title="Add"
                            on-click="_openAddAgAmendmentDialog">
          </paper-icon-button>
        </div>

        <div id="download-template-wrapper" class="row-h flex-c row-second-bg b-border">
          <!-- Amendments template download -->
          <div id="download-template-msg">
            Use the amendment template for documenting changes and signing.
          </div>
          <!-- Download template btn -->
          <a id="download-template-a" target="_blank" href="/static/agreements/amendment_template.docx">
            <paper-button id="download-template-btn" class="secondary-btn">
              <iron-icon icon="file-download"></iron-icon>
              Download template<commit_msg>Fix amendment template download<commit_after>import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-button/paper-button.js';
import '@unicef-polymer/etools-info-tooltip/etools-info-tooltip.js';
import '@unicef-polymer/etools-content-panel/etools-content-panel.js';
import '@unicef-polymer/etools-data-table/etools-data-table.js';

import CONSTANTS from '../../../../../../../config/app-constants';
import CommonMixin from '../../../../../../mixins/common-mixin';
import {gridLayoutStyles} from '../../../../../../styles/grid-layout-styles.js';
import {SharedStyles} from '../../../../../../styles/shared-styles.js';
import {buttonsStyles} from '../../../../../../styles/buttons-styles.js';
import '../../../../../../mixins/common-mixin.js';
import './add-ag-amendment-dialog.js';
import {connect} from 'pwa-helpers/connect-mixin';
import {store, RootState} from '../../../../../../../store';
import {isJsonStrMatch} from '../../../../../../utils/utils';
import {fireEvent} from '../../../../../../utils/fire-custom-event';
import {property} from '@polymer/decorators';
import {LabelAndValue} from '../../../../../../../typings/globals.types';
import {AddAgAmendmentDialog} from './add-ag-amendment-dialog.js';


/**
 * @polymer
 * @customElement
 * @appliesMixin CommonMixin
 */
class AgreementAmendments extends connect(store)(CommonMixin(PolymerElement)) {

  static get template() {
    return html`
      ${gridLayoutStyles} ${SharedStyles} ${buttonsStyles}
      <style
          include="data-table-styles">
        [hidden] {
          display: none !important;
        }

        :host {
          display: block;
          width: 100%;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }

        .file-wrapper {
          width: 100%;
          max-width: 100%;
        }

        #amendments-wrapper {
          margin-top: 16px;
        }

        :host(:not([edit-mode])) #amendments-wrapper {
          margin-bottom: 24px;
        }

        /* amendment template download section styles start */
        #download-template-msg {
          max-width: calc(100% - 210px);
        }

        #download-template-btn {
          max-width: 220px;
          margin: 0 0 0 24px;
          padding: 0;
        }

        #download-template-a {
          display: inherit;
        }

        /* amendment template download section styles end */

        .attachment {
          color: var(--dark-icon-color);
          margin-right: 8px;
        }
        .unsaved-amendment {
          color: var(--warning-color);
        }
      </style>

      <etools-content-panel panel-title="Amendments ([[dataItems.length]])">

        <div slot="panel-btns">
          <paper-icon-button icon="add-box"
                            hidden$="[[!editMode]]"
                            disabled$="[[!editMode]]"
                            title="Add"
                            on-click="_openAddAgAmendmentDialog">
          </paper-icon-button>
        </div>

        <div id="download-template-wrapper" class="row-h flex-c row-second-bg b-border">
          <!-- Amendments template download -->
          <div id="download-template-msg">
            Use the amendment template for documenting changes and signing.
          </div>
          <!-- Download template btn -->
          <a id="download-template-a" target="_blank" href="/static/agreements/amendment_template.docx" download>
            <paper-button id="download-template-btn" class="secondary-btn">
              <iron-icon icon="file-download"></iron-icon>
              Download template
{'fraction_non_alphanumeric': 0.18179387782382034, 'fraction_numerical': 0.007752974201309985, 'mean_word_length': 1.9329674637397098, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 28, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6725919', 'n_tokens_mistral': 2193, 'n_tokens_neox': 2111, 'n_words': 405}