How to use same template for list of all item names and a single item detail view

1

I have a template where I want to display link or button for each item in the data returned from collection (just link

<Template name="Deals">

    <button class="new-deal"><i class="fa fa-plus-circle"></i></button>	
    {{#each deals}}
        <a href="/deals/{{_id}}">{{name}}</a>
    {{/each}}
    
    {{> Deal}}
    
 </Template>

The individual deal template is used in the above main page is called Deal, shown below.

<template name="Deal">
    Single Deal {{name}} goes here
    This deal was created by {{owner}}!
 </template>

Where the deals is a collection returned based on collection.find


Template.Deals.helpers({
     deals: function(){

       // Get current user and return all of the deals in the database owned by that user.
       var user  = Meteor.userId(),
       deals = Deals.find({"owner": user});
       
       if (deals) {
         // assign the first deal id in session as current deal id.
         //Session.set('currentDealId',deals.fetch()[0]._id);  
         return deals;
       }
     },
     currentDealId: function(){
       // helper function returning the currentdealid, mainly used in template code
       return Session.get('currentDealId');
     }
});

Schema is here…

Deals = new Meteor.Collection('deals');

Deals.allow({
    insert: function(){
      return true;
    },
    update: function(){
      return true;
    },
    remove: function(){
      return true;
    }
  });


DealsSchema = new SimpleSchema ({
    name: {
        type: String,
        label: "Company Name"
    },
    owner: {
        type: String,
        label: "Owner",
        autoValue: function(){
            return this.userId
        }
    }
});

Deals.attachSchema(DealsSchema);

My iorn router looks like this…

Router.route('deals', {
  path: '/deals',
  template: 'Deals',
  onBeforeAction: function(){
    Session.set('currentRoute', 'deals');
    Session.set('newDeal', false);
    this.next();
  }
});

Router.route('deals_with_id', {
  path: '/deals/:id',
  template: 'Deals',
  onBeforeAction: function(){
    Session.set('currentRoute', 'deals');
    Session.set('newDeal', false);
    this.next();
  }
});

What is something I don’t know, is how to setup the currentDealId in session, so that the page refreshes when user clicks on the links on the top ?
All i want is to do is to load the first deal in the single Deal template by default.
When clicking on the link on top of the page, I want to load that particular deal.

What is the best way to do this? Also, how easy is to turn that list of hrefs on top a scrolling list or carousel ?

Thanks