<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Saved Articles</title>
    <!-- CSS and Bootstrap files needed for styling -->
    <link
      rel="stylesheet"
      href="../../../../assets/bootstrap/css/bootstrap.min.css"
      />
    <link rel="stylesheet" href="../../../../assets/fonts/typicons.min.css" />
    <!-- <link rel="stylesheet" href="../../../assets/css/Footer-Basic.css" /> -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
      />
    <link
      rel="stylesheet"
      href="../../../../assets/css/Navigation-with-Search.css"
      />
    <link rel="stylesheet" href="../../../../assets/css/styles.css" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="../../../../citestyle.css"
      />

</head>	
  
  <div id="page-container">
      <div id="content-wrap">
        <!-- Navbar Component -->
        <app-navbarlogout></app-navbarlogout>
        
        <div class="container">>

            <div class="jumbotron" style="color:#222222;background-color:#ffffff;">
              <div *ngIf="userDetails" id="profile-body">
                  <button class="searchbutton submit" (click)="profile()">Profile</button>
          
                  <h2>
                    {{ userDetails.fullName.split(" ")[0] }}
                    {{ userDetails.fullName.split(" ")[1] }}'s Saved Articles
                  </h2>
                  <br />
              <div
              *ngFor="let article of userDetails.articles | paginate: { itemsPerPage: 7, currentPage: currPage };
              let i = index" [attr.data-index]="i">
          
                <div class="row" >
        
                  <div class="col-md-11" style="background-color: rgba(0,0,0,.025)">
                    <!-- Article title with link to URL -->
                    <a
                    id="title"
                    style="margin-top: 10px;"
                    href="/article?article_id={{ article.article_id }}"
                    >{{ article.title }}</a>
          
                  <!-- <br /> -->
                  <br>
                  <!-- Article author -->
                  <div class="row"
                    style="display: inline; margin:0px;"
                    *ngFor="let author of article.authors | slice: 0:3 "
                    >
                    <p class="authorName" style="margin-top:15px;margin-left:0px;">{{ author.name }}</p>
                    <p style="display: inline;margin:0px;margin-left:0px;">-</p>
                  </div>
                  <!-- Article date -->
                  <p class="year" style="margin-left:0px;">{{ article.year | slice: 0:10 }}</p>
          
                  <div class="container" style="padding-left:0px;">
                    <!-- Article abstract -->
                    <p style="margin-bottom:4px;">{{ article.abstract | slice: 0:200 }}...</p>
                  </div>
                  </div>
                </div>
          
                <div class="row" style="padding-left:15px; padding-bottom: 10px;">
                  <!-- View PDF button -->
                  <a
                    href="{{article.article_url}}"
                    target="_blank"
                    id="subtasks">
                    <i class="fa fa-file-pdf-o"></i>&nbsp;View PDF</a>
                  <!-- End of view PDF button -->
                  <!-- Cite button -->
                  <div id="popupbox" class="popupposition">
                    <div id="popupwrapper">
                      <div id="container">
                        <h3>MLA</h3>
                        <p>
                          Casagrande, Daniel J., et al. "Sulfur in peat-forming
                          systems of the Okefenokee Swamp and Florida
                          Everglades: origins of sulfur in coal." Geochimica et
                          Cosmochimica Acta 41.1 (1977): 161-167.
                        </p>
                        <p>
                          <a
                            href="javascript:void(0)"
                            (click)="toggle_cite('popupbox')"
                            >Close</a>
                        </p>
                      </div>
                    </div>
                  </div>
                  <a
                    href="javascript:void(0)"
                    (click)="toggle_cite('popupbox')"
                    id="subtasks">
                  <i class="fa fa-quote-right"></i>&nbsp;Cite</a>
                  <!-- End of cite button -->
                  <!-- unSave button -->
                  <a
                    id="subtasks"
                    href="javascript:void(0)"
                    (click)="
                      unsaveArticle(
                    article.article_id,  
                    article.title,
                    article.authors,
                    article.year,
                    article.abstract,
                    article.article_url,
                    i
                    )
                    "
                    class="subtasks"
                    tabindex="1"
                    >&nbsp;<i class="fa fa-save"></i>&nbsp;<span id="{{ article.title }}">Unsave</span>
                  </a>
                  <!-- End of save button -->
          
                  <!-- Share button -->
                  <div id="share" class="popupposition">
                    <div id="popupwrapper">
                      <div id="container">
                        <div style="margin-bottom: 5px;">
                          <fb-like url="{{article.article_url}}"></fb-like>
                        </div>
                        <div style="margin-bottom: 5px;">
                          <google-plus url="{{article.article_url}}"></google-plus>
                        </div>
                        <div style="margin-bottom: 5px;">
                          <linkedin-share url="{{article.article_url}}"></linkedin-share>
                        </div>
                        <div style="margin-bottom: 5px;">
                          <pin-it url="{{article.article_url}}"></pin-it>
                        </div>
                        <div style="margin-bottom: 5px;">
                          <tweet url="{{article.article_url}}"></tweet>
                        </div>
                        <p>
                          <a href="javascript:void(0)" (click)="share('share')">Close</a>
                        </p>
                      </div>
                    </div>
                  </div>
                  <a
                    id="subtasks"
                    href="javascript:void(0)"
                    (click)="share('share')"
                    class="subtasks"
                    >
                  <i class="fa fa-share-alt"></i>&nbsp;Share</a>
                  <!-- End of share button -->
                  <!-- Start of Similar Articles button -->

                  <div id="popupbox-similar" class="popupposition">
                    <div id="popupwrapper">
                      <div id="container">
                        <a
                          
                          href="/article?article_id={{ article.title }}"
                          style="font-size: 20px; color: rgb(0,0,200);"
                          >{{ article.title }}
                        </a>
                        <p>
                          <a
                            href="javascript:void(0)"
                            (click)="toggle_cite('popupbox-similar')"
                            >Close</a>
                        </p>
                      </div>
                    </div>
                  </div>
                  <a
                    href="javascript:void(0)"
                    (click)="toggle_cite('popupbox-similar')"
                    id="subtasks">
                  <i class="fa fa-search"></i>&nbsp;Similar Articles</a>
            <!-- End of Similar aricles button -->
                </div>
                <!-- End of row -->
               
              </div>
                <!-- Event handler for pagination -->
                <pagination-controls class="my-pagination" (pageChange)="currPage = $event"></pagination-controls>
              </div>
              <!-- </div> -->
            </div>
          
        </div>
      </div>

      <div id="page-footer">
        <!-- Footer Component -->
        <app-footerfixed></app-footerfixed>
      </div>

    </div>







